/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */ /* General Custom CSS */ #customer_case{ background-color: #4285f4; } /* CSS Document */ .devsite-full-width-page .devsite-main-content{max-width:1592px;margin:0 auto;padding:0 120px} .devsite-main-content{max-width:1400px;position:relative} .devsite-main-content .st1{margin:20px 0px;padding:0 1 0 0px;} .devsite-main-content .st2{margin:40px auto;padding:0 24px;} .devsite-main-content img{max-width:272px}:link,:visited{color:#1a73e8;outline:0;text-decoration:none} .devsite-wrapper{margin-top:64px;overflow:hidden;width:100%} @media screen and (max-width:1000px){.devsite-full-width-page .devsite-main-content{padding:0 80px}} @media screen and (max-width:720px){.devsite-full-width-page .devsite-main-content{padding:0 16px}} #cloud-site{color:#4a5960;font-size:14px} #cloud-site a:link,:visited{outline:0;text-decoration:none;} #cloud-site .text-center{text-align:center} #cloud-site .l-space-top-0{margin-top:0}#cloud-site .l-pad-top-0{padding-top:0}#cloud-site .l-pad-bottom-0{padding-bottom:0} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-space-0{margin:0}#cloud-site .l-space-top-0{margin-top:0}#cloud-site .l-pad-top-10{padding-top:40px}#cloud-site .l-pad-bottom-10{padding-bottom:40px}} #cloud-site .l-pad-bottom-5{padding-bottom:20px} #cloud-site .l-space-bottom-8{margin-bottom:64px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-space-bottom-8{margin-bottom:32px}} #cloud-site .l-pad-top-10{padding-top:80px}#cloud-site .l-pad-bottom-10{padding-bottom:80px} #cloud-site .cloud-display2{font-family:Google Sans,Arial,sans-serif;font-size:40px;font-weight:400;letter-spacing:0;line-height:48px;margin:0} @media all and (min-width: 600px){#cloud-site .cloud-display2{font-size:64px;letter-spacing:-.5px;line-height:72px}} #cloud-site .cloud-headline2{font-family:Google Sans, Arial, sans-serif;font-size:32px;font-weight:500;letter-spacing:0;line-height:40px;margin:0} @media all and (min-width: 600px){#cloud-site .cloud-headline2{font-size:40px;letter-spacing:-0.5px;line-height:52px}} #cloud-site .cloud-headline3{font-family:Arial,sans-serif;font-size:24px;font-weight:400;letter-spacing:0;line-height:32px;margin:0} @media all and (min-width: 600px){#cloud-site .cloud-headline3{font-size:32px;line-height:40px}} #cloud-site .cloud-headline4{font-family:Arial,sans-serif;font-size:20px;color:#20211B;font-weight:400;letter-spacing:0;line-height:30px;margin:0} @media all and (min-width: 600px){#cloud-site .cloud-headline4{font-size:22px;color:#20211B;}} #cloud-site .cloud-headline10{font-family:Arial,sans-serif;font-size:18px;font-weight:400;letter-spacing:0;line-height:30px;margin:0} @media all and (min-width: 600px){#cloud-site .cloud-headline10{font-size:20px;color:#4A5960;}} .cloud-body-text__small{font-family:Roboto, Arial, sans-serif;font-size:14px;font-weight:400;line-height:24px} #cloud-site.home .button.button-cloud{margin:22px 10px 22px 0px} #cloud-site.home .button.button-cloud.contact-us{background:#fff;border:1px solid #dfdfdf;color:#2b85e7;padding:0 48px} #cloud-site.home .button.button-cloud.contact-us:hover{background-color:#f8fafe;box-shadow:inherit} #cloud-site .cloud-eyebrow{color:#5f6368;font-family:Arial,sans-serif;font-size:13px;font-weight:400;letter-spacing:1px;line-height:1;margin:0;overflow:visible;} #cloud-site .cloud-eyebrow strong{color:#4285f4;font-weight:inherit} #cloud-site .background-grey{background:#f7f7f7;color:#4a5960} #cloud-site .background-grey img{padding:10px} #cloud-site .cloud-section-header{margin-bottom:40px} .cloud-grid,.cloud-grid--alternate{display:grid;grid-column-gap:16px;grid-template-columns:4fr} .cloud-grid.cloud-grid-no-gap,.cloud-grid--alternate.cloud-grid-no-gap{grid-column-gap:0} @media all and (min-width: 600px){.cloud-grid{grid-column-gap:0px;grid-template-columns:repeat(12, 1fr)}.cloud-grid .is-6{grid-column:span 6/span 6}.cloud-grid .is-10{grid-column:span 10/span 10}} @media all and (min-width: 768px){.cloud-grid--alternate .is-6{grid-column:span 6/span 6}.cloud-grid--alternate .is-12{grid-column:span 12/span 12}} @media all and (min-width: 1024px){.cloud-grid{grid-column-gap:0px;grid-template-columns:repeat(12, 1fr)}.cloud-grid .is-4-large{grid-column:span 4/span 4}.cloud-grid .is-5__large{grid-column:span 5/span 5}.cloud-grid .is-7__large{grid-column:span 7/span 7}.cloud-grid--alternate{grid-column-gap:28px;grid-template-columns:repeat(12, 1fr)}.cloud-grid--alternate .is-4__large{grid-column:span 4/span 4}.cloud-grid--alternate .is-10__large{grid-column:span 10/span 10}.cloud-grid--alternate .is-1__large--offset{grid-column-start:2}} .cloud-button{align-items:center;border:0;border-radius:4px;box-shadow:none;box-sizing:border-box;cursor:pointer;display:inline-flex;font:500 14px "Roboto",Arial,sans-serif;height:44px;justify-content:center;letter-spacing:.5px;min-width:auto;outline:none;padding:0 24px;position:relative;text-decoration:none;transition:none;vertical-align:inherit} .cloud-button:disabled,.cloud-button:disabled:hover,.cloud-button:disabled:focus{background-color:#dadce0;border-color:#dadce0;color:#fff;cursor:default} .cloud-button:active{box-shadow:none} .cloud-button:focus{text-decoration:none} .cloud-button--primary{background-color:#1a73e8;-webkit-text-fill-color:#fff} .cloud-button--primary:hover{background-color:#174ea6;} .cloud-button--primary:active,.cloud-button--primary:focus{background-color:#1a73e8} .cloud-button--primary:active::before,.cloud-button--primary:focus::before{background-color:#fff;content:'';height:100%;opacity:.24;position:absolute;width:100%} .cloud-button--flat{border-radius:0;color:#1a73e8;height:auto;padding:0} .cloud-button--flat:visited{color:#7b1fa2} .cloud-button--flat:hover,.cloud-button--flat:focus{color:#174ea6} .cloud-button--flat:focus{background-color:#f1f3f4;outline:10px solid #f1f3f4} .cloud-button--flat.cloud-button--dark:focus{outline:10px solid rgba(32,33,36,0.2)} .cloud-button--flat.cloud-button--dark .cloud-button__icon{color:inherit} .cloud-button.cloud-button--dark{border-color:rgba(32,33,36,0.4);color:#202124} .cloud-button.cloud-button--dark:hover{color:rgba(32,33,36,0.7)} .cloud-button.cloud-button--dark:focus{background-color:rgba(32,33,36,0.2)} .cloud-button__set .cloud-button{margin-right:16px;margin-top:16px} .cloud-button__set .cloud-button:first-child{margin-top:24px} .cloud-button__set .cloud-button:last-child{margin-right:0} @media all and (min-width: 600px){.devsite-full-width-page .devsite-main-content{padding:0 40px}} @media all and (min-width: 1024px){.devsite-full-width-page .devsite-main-content{padding:0 80px}} .cloud-section{padding:80px 0} .cloud-section-body,.cloud-card-body {font-family: Google Sans,Arial,sans-serif;font-size: 14px;line-height: 22px;} .cloud-section-header{margin-bottom:40px;} .cloud-section-header-heading {max-width: 720px;overflow-wrap: break-word;} .cloud-section-header-link {padding-top: 60px;} .cloud-section-header-eyebrow + .cloud-section-header-heading {padding-top: 16px;} .cloud-section-p{padding-top:90px;padding-left:90px;} .cloud-section--border{border-top:1px solid #dadce0} .cloud-card{background-color:#fff;background-position:center center;background-size:auto 100%;border:1px solid #dadce0;box-sizing:border-box;display:flex;flex-direction:column;min-width:236px;padding-bottom:24px;position:relative;transition:box-shadow .3s ease-out, background-size .3s ease-out} .cloud-card:hover{background-size:auto 103%;box-shadow:0 5px 20px 0 rgba(0,0,0,0.1);z-index: 1;} .cloud-card-icon{align-items:center;box-sizing:content-box;display:flex;height:32px;padding-top:32px;width:32px} .cloud-copy__icon-content--large{height:92px;margin-bottom:16px;width:92px} @media all and (min-width: 768px){.cloud-copy__text{margin:0 16px 0 0}} .cloud-link{-webkit-text-fill-color:#1a73e8;text-decoration:none} .cloud-card-heading {max-width: 360px;padding: 0;} .cloud-card-link {position: static;} .cloud-card-link::after {content: '';display: block;height: 100%;left: 0;overflow: visible;position: absolute;top: 0;width: 100%;} .cloud-card--solution {border: 1px solid #eee;height: 100%;padding: 36px;margin: 0 -1px -1px 0;} .cloud-card--solution .cloud-card-eyebrow {padding-bottom: 20px;} .cloud-card--solution .cloud-card-icon {height: 72px;margin-bottom: 16px;margin-left: -4px;padding-top: 0;width: 72px;} .cloud-card--solution .cloud-card-link:hover {text-decoration: none;-webkit-text-fill-color:#202124;} .cloud-card--solution .cloud-card-body {flex-grow: 1;} .cloud-card--solution .cloud-card-link {margin-top: 24px;} .white{color: #fff} .cloud-hero {padding-bottom: 20px;padding-top: 20px;position: relative;} .cloud-hero__card-container {box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);} .cloud-hero__card {background: #f1f3f4;height: 100%;min-height: 320px;padding: 20px 24px;} .cloud-hero__card--gcp {background: #FBBC04;background-image: url('../../../image/gcp-bg.svg');background-repeat: no-repeat;background-position: bottom right;background-size: 75%;} .cloud-hero__buttons {margin-top: 12px;} .cloud-button--dark {color: #202124;} .cloud-hero__card h2 {margin-top: 0;max-width: 320px;} .cloud-hero__gsuite-icons {display: flex;margin-top: 60px;} @media only screen and (min-width: 600px) {.cloud-hero::before,.cloud-hero::after {background-repeat: no-repeat;background-size: contain;content: '';display: block;height: 100%;position: absolute;top: 0;width: 100%;z-index: -1;}.cloud-hero::before {background-image: url('../../../image/bc-right.png');background-position: right 0;right: -178px;top: -20px;}.cloud-hero::after {background-image: url('../../../image/bc-left.png');background-position: left 0;left: -186px;top:75px;}.cloud-hero::before,.cloud-hero::after {height: 90%;}.cloud-hero__card--gcp {background-size: 55%;}.cloud-hero__card {padding: 40px 48px;}.cloud-section-header {padding-bottom: 32px;}}.cloud-card-body {font-size: 16px;line-height: 24px;}.cloud-section-header-eyebrow + .cloud-section-header-heading {padding-top: 24px;} @media only screen and (min-width: 1024px) {.cloud-hero::before,.cloud-hero::after {height: 650px;}.cloud-hero__card {padding: 40px 48px;}.cloud-hero__card .cloud-button__set .cloud-button {margin-right: 24px;}.cloud-hero__card--gcp {background-size: 55%;}.cloud-card-icon {padding-top: 24px;}.cloud-card--product .cloud-card-heading {padding-top: 24px;}.cloud-card-arrow {margin-top: 24px;}} /*******/ .flex-rows h4 {font:500 16px/24px Roboto,sans-serif;color: #424242;font-weight: 700;margin: 28px 0 16px;} /*hr {display: none;}*/ .comparison-grid p {font-size: 14px;line-height: 24px;margin: 28px 0 16px;} #cloud-site .show-mobile {display: none;} .show-mobile.build-your-own .borderless-row {min-height: 35px;} .tooltip-container {position: relative;} .cloud-info {margin-right: 5px;} .cloud-info::before {content: 'info_outline';} .tooltip-container > .tooltip {background: #fff;box-shadow: 0 4px 4px rgba(0,0,0,0.24), 0 0 4px rgba(0,0,0,0.12), 0 6px 18px rgba(0,0,0,0.12);min-width: 320px;opacity: 0;padding: 24px;pointer-events: none;position: absolute;text-align: center;top: 25px;z-index: 1;} .tooltip-container:hover > .tooltip,.tooltip-container:focus > .tooltip,.cloud-info:focus ~ .tooltip {opacity: 1;} .comparison-grid {margin: 0;} .comparison-grid .flex-rows {border: none;display: flex;} .comparison-grid .width-20 {max-width: 20%} .comparison-grid .flex-rows .cell {align-items: center;border-top: 1px solid #d6d6d6;border-right: 1px solid #d6d6d6;display: flex;justify-content: center;padding: 18px;text-align: center;width: 20%;} .comparison-grid .flex-rows .cell:nth-child(1) {display: block;text-align: left;} .comparison-grid .section-headers {background: #e8eaed;border-top: 1px solid #d6d6d6;border-left: 1px solid #d6d6d6;border-right: 1px solid #d6d6d6;color: #424242;font: 700 16px/24px Roboto, Arial, sans-serif;line-height: 1;padding: 18px;width: 100%;} .comparison-grid .column-header {color: #fff;font: 400 22px/24px 'Google Sans', Arial, sans-serif;} .comparison-grid .flex-rows .cell.header-middle-col {border-right: none;width: 40%;} .comparison-grid .flex-rows .cell.border-less-cell {border-bottom: none;border-top: none;} .flex-rows .cell:nth-child(2),.flex-rows .cell:nth-child(5) {background-color: #f1f3f4;} .flex-rows .cell:nth-child(3),.flex-rows .cell:nth-child(5) {border-left: 2px solid #5BB974;} .flex-rows:nth-child(2) .cell:nth-child(4),.flex-rows:last-child .cell:nth-child(4) {background-color: #f1f3f4;border-right: 1px solid #d6d6d6;border-left: 2px solid #5BB974;} .flex-rows .cell:nth-child(4),.flex-rows .cell:nth-child(2) {border-right: none;} .flex-rows:nth-child(2) .cell,.flex-rows:nth-child(3) .cell,.flex-rows:last-child .cell {display: block;text-align: center;} .flex-rows:last-child .cell:nth-child(3) {border-bottom: 2px solid #5BB974;} .flex-rows .enterprise-cell-header {background: #5F6368;} .comparison-grid .flex-rows .basic-cell-header {background: #9aa0a6;} .comparison-grid .flex-rows .role-based-header {background: #5bb974;} .flex-rows .cell-bottom-border {border-bottom: 1px solid #d6d6d6;} .material-icons.md-blue {color: #0091ea;cursor: pointer;font-size: 18px;font-weight: lighter;line-height: 26px;} .flex-rows:last-child .cell-nth-child(3) {border-bottom: 2px solid #5bb974;} .flex-hover-card{box-sizing:border-box;margin-right:20px;background:#fff;border-radius:2px;box-shadow:0 2px 2px rgba(0,0,0,.24),0 0 2px rgba(0,0,0,.12);cursor:pointer;-ms-flex:1;flex:1;letter-spacing:0.01em;padding:16px;position:relative;transition:all 0.3s} .flex-hover-card:hover{box-shadow:0 4px 4px rgba(1,67,163,.24),0 0 4px rgba(1,67,163,.12),0 6px 18px rgba(43,133,231,.12);transform:translate3d(0,-2px,0);text-decoration:none} .flex-hover-card-container {display: inline-flex;flex-direction: row;flex-wrap: wrap;} .flex-hover-card-container .flex-hover-card {color: #666;display: inline-flex;flex-direction: column;font-size: 14px;line-height: 1.6em;margin: 24px 8px 0 0;max-width: 208px;min-height: 220px;min-width: 208px;padding: 32px 24px;} .inline-block {display: inline-block;} .w-1080 {box-sizing: border-box;margin-left: auto;margin-right: auto;max-width: 1080px;} #cloud-site .flex-hover-card img {align-self: flex-start;margin-bottom: 10px;max-height: 36px;max-width: 36px;padding: 0;} .flex-hover-card .title {color: #212121;font: 500 15px/18px Roboto, sans-serif;margin-bottom: 8px;opacity: .87;} .flex-hover-card .sub-title {color: #757575;font: normal 13px/15px Roboto, sans-serif;margin-bottom: 24px;opacity: .87;padding: 0;} .flex-hover-card .content {color: #747474;font: normal 13px/18px Roboto, sans-serif;padding: 0;} .solution-heading {font-size: 24px;} .view-link {display: inline-block;font: 500 14px/30px Roboto, sans-serif;margin-right: 8px;padding-right: 30px;position: relative;} .view-link:after {background-color: #039be5;background-image: url('../wp-content/image/arrow_upward_white_24dp.png');background-repeat: no-repeat;background-size: contain;border-radius: 50%;content: '';height: 20px;position: absolute;right: 0;top: 4px;transform: rotateZ(45deg);width: 20px;} #cloud-site .flex {display: flex;} #cloud-site .flex-c {flex-direction: column;} #cloud-site .flex-r {flex-direction: row;} #cloud-site .flex-ac {align-items: center;} #cloud-site .flex-as {align-items: flex-start;} #cloud-site .flex-jc {justify-content: center;} #cloud-site .flex-1 {flex: 1 1 auto;} #cloud-site .flex-2 {flex: 2;} #cloud-site .flex-3 {flex: 3;} #cloud-site .flex-4 {flex: 4;} .justify-between {justify-content: space-between;} .material-icons {font-family: 'Material Icons';font-weight: normal;font-style: normal;font-size: 24px;line-height: 1;letter-spacing: normal;text-transform: none;display: inline-block;white-space: nowrap;word-wrap: normal;direction: ltr;-webkit-font-feature-settings: 'liga';-webkit-font-smoothing: antialiased;} @font-face {font-family: 'Material Icons';font-style: normal;font-weight: 400;src: url('http://www.hmdlp.cn/wp-content/image/arrow2.woff2') format('woff2');} /* Desktop Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the desktop view of your site */ @media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ .avia-menu-text{ font-weight: normal; } #customer_case{ background-color: #4285f4; } } /* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #customer_case{ background-color: #4285f4; } } /*Trial*/ #cloud-site sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-0.5em;color:#1a73e8;outline:0;text-decoration:none} #cloud-site .l-space-bottom-4{margin-bottom:32px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-space-bottom-4{margin-bottom:16px}} #cloud-site .l-space-bottom-5{margin-bottom:40px}#cloud-site .l-pad-top-5{padding-top:40px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-space-bottom-5{margin-bottom:20px};#cloud-site .l-pad-top-5{padding-top:20px}} #cloud-site .l-space-right-6{margin-right:48px}#cloud-site .l-space-top-6{margin-top:48px}#cloud-site .l-pad-bottom-6{padding-bottom:48px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-space-right-6{margin-right:24px}#cloud-site .l-space-top-6{margin-top:24px}#cloud-site .l-pad-bottom-6{padding-bottom:24px}} #cloud-site .l-space-right-9{margin-right:72px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-space-right-9{margin-right:36px}} #cloud-site .l-space-top-10{margin-top:80px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-space-top-10{margin-top:40px}} #cloud-site .l-pad-top-17{padding-top:136px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-pad-top-17{padding-top:68px}} #cloud-site .button{border:none;border-radius:2px;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;height:auto;letter-spacing:0.01em;line-height:32px;margin:0;overflow:hidden;padding:0 16px;text-decoration:none;transition:box-shadow 0.3s,background-color 0.3s,color 0.3s,transform 0.3s} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .button{display:block}} #cloud-site .button:hover{border:none}#cloud-site .button.button-small{font-size:12px;line-height:24px;padding:0 8px} #cloud-site .button.button-large{font-size:14px;font-weight:500;line-height:48px;padding:0 48px} #cloud-site .button.button-cloud{background:#4285f4 url(/wp-content/image/gcp-button-icon.svg) 16px 12px no-repeat;color:#fff;padding-left:56px} #cloud-site .annotation-text {float: right;font-size: 12px;color:#4a5960;margin-top:0;margin-right:65px;} #cloud-site .min-w-300 {min-width: 300px;flex-basis: 300px;} /*#cloud-site .article-header {background-color: #fbfbfb;border-bottom: 1px solid #e4e4e4;}*/ .bg-content-grey {background-color: #f6f6f6;} #cloud-site .article-header {border-bottom: 1px solid #e4e4e4;} #cloud-site .article-header .hero-title{color: #424242;font-size: 48px;line-height: 1.2em;margin-bottom: 20px;margin-top: 0;} #cloud-site .article-header .hero-subtitle{color: #616161;font-size: 16px;font-weight: 400;line-height: 1.8em;} #cloud-site .hero-subtitle{margin:0px 0 24px;} #cloud-site .hero-title{font:400 32px/40px Arial,Google Sans,sans-serif;letter-spacing:0} .headline {align-items: center;display: flex;} .headline .grid-title,.section.alternate .grid-title {color: #424242;font-size: 40px;font-weight: 300;line-height: 1.2em;} .section.alternate .grid-title {margin-bottom: 16px;} .section .link {font-size: 14px;padding-right: 24px;position: relative;} .section .link:after {background-color: #039be5;background-image: url('../../../../images/icons/material/system/1x/arrow_upward_white_24dp.png');background-repeat: no-repeat;background-size: contain;border-radius: 50%;content: '';height: 15px;position: absolute;right: 0;top: calc(50% - 7.5px);transform: rotateZ(90deg);width: 15px;} .grid-block {padding: 0 16px;} .grid-block .grid-title img {margin-right: 10px;vertical-align: middle;} .grid-block .grid-title{color: #414141;font-size: 24px;font-weight: 500;line-height: 1.9em;} .grid-block .content{color: #616161;font-size: 16px;font-weight: 400;line-height: 1.8em;} /*-3------*/ #cloud-site .pricing-innovation dt {color: #414141;font-size: 24px;font-weight: 500;line-height: 1.9em;} #cloud-site .pricing-innovation dd {color: #616161;font-size: 16px;font-weight: 400;line-height: 1.8em;} #cloud-site .pricing-innovation dt {align-items: center;display: flex;line-height: 1.2em;margin-bottom: 15px;margin-top: 64px;} #cloud-site .pricing-innovation dd {margin-left: 7px;} .grid-fluid{margin:0 auto} .grid-fluid .c4,.grid-fluid .c5{display:inline;float:left} .grid-fluid{*zoom:1} .grid-fluid:after,.grid-fluid:before{clear:both;content:'.';display:block;font-size:0;height:0;line-height:0;overflow:hidden;visibility:hidden;width:0} .grid-fluid .c4,.grid-fluid .c5{margin-left:1.04167%;margin-right:1.04167%} .grid-fluid .a1{margin-right:10.41667%} .grid-fluid .c4{width:31.25%} .grid-fluid .c5{width:39.58333%} .pricing-innovation .img-cont {display: flex;justify-content: center;margin-right: 15px;min-width: 50px;} /*-4------*/ .bg-blue {background-color: #448aff;} .disp-b {display: block;} blockquote.text-light {color: #fff;font-size: 24px;font-weight: 300;line-height: 1.8em;margin: 0;padding: 50px 10%;border: none;} blockquote.text-light em {color: #fff;font-size: 12px;opacity: 0.87;} /*-5--------------*/ #cloud-site .l-space-bottom-2{margin-bottom:16px}#cloud-site .l-space-left-2{margin-left:16px}#cloud-site .l-pad-top-2{padding-top:16px}#cloud-site .l-pad-bottom-2{padding-bottom:16px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-space-bottom-2{margin-bottom:8px}#cloud-site .l-space-left-2{margin-left:8px}#cloud-site .l-pad-top-2{padding-top:8px}#cloud-site .l-pad-bottom-2{padding-bottom:8px}} #cloud-site .l-pad-top-4{padding-top:32px}#cloud-site .l-pad-bottom-4{padding-bottom:32px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-pad-top-4{padding-top:16px}#cloud-site .l-pad-bottom-4{padding-bottom:16px}} #cloud-site .l-space-top-9{margin-top:72px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-space-top-9{margin-top:36px}} .flex-card-container {clear: both;display: flex;} .flex-card-container.wrap,.wrap {flex-wrap: wrap;} .flex-card-container.wrap .flex-card {margin-bottom: 20px;margin-top: 20px;} .flex-card {background: #fff;background: white;border-radius: 2px;box-sizing: border-box;margin-right: 20px;position: relative;} .flex-card.hover {cursor: pointer;transition: all 0.3s;} .flex-card.hover:hover {box-shadow: 0 4px 4px rgba(1,67,163,0.24),0 0 4px rgba(1,67,163,0.12),0 6px 18px rgba(43,133,231,0.12);text-decoration: none;transform: translate3d(0, -2px, 0);} .flex-card.shadow {box-shadow: 0 2px 2px rgba(0,0,0,0.24),0 0 2px rgba(0,0,0,0.12);} .card-pad-standard {padding-left: 36px;padding-right: 36px;} .flex-card.padding {padding: 16px;} .flex-card.border-top {border-top: 2px solid #0091EA;} .flex-card .grid-title {color: #414141;font-size: 22px;} .flex-card .desc {color: #545454;font-size: 14px;line-height: 1.4;} .w-300 {width: 300px;} .color-gray {color: #9e9e9e;} .percent-num {font-size: 18px;line-height: 1em;font-weight:600;} .percent-text {font-size: 18px;line-height: 1.2em;padding: 2px 0 0 5px;} .aws-compare {color: #b3b3b3;font-style: italic;} /*6******/ #cloud-site .l-pad-bottom-8{padding-bottom:64px} @media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:780px){#cloud-site .l-pad-bottom-8{padding-bottom:32px}} .min-w-250 {min-width: 250px;flex-basis: 250px;} /*7*/ .banner-bottom {align-items: center;color: #fff;display: flex;min-height: 175px;padding: 20px 5%;} .banner-bottom > * {margin: 0 8% 0 0;} .banner-bottom .main {font-size: 22px;} .banner-bottom .body {font-size: 18px;font-weight: 300;} @media handheld and (max-width: 600px),screen and (max-device-width: 600px),screen and (max-width: 600px) {.banner-bottom {align-items: initial;flex-direction: column;text-align: center;}.banner-bottom > * {margin: 10px 0;}} #cloud-site .button.button-plain{background:#fff;border:1px solid #dfdfdf;color:#4285f4} #cloud-site .button.button-plain:hover,#cloud-site .button.button-plain:focus{background-color:#f8fafe;color:#4285f4} /*-8---------*/ @media all and (min-width: 600px){#cloud-site .cloud-subhead{font-size:18px;line-height:30px}} .cloud-carousel__slide-deck{display:flex;transform:translateX(0);transition:transform .8s;transition-timing-function:cubic-bezier(0.43, 0, 0.47, 1)} .cloud-carousel__slide{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:0 45px;width:100%} .cloud-carousel__slide-link{color:inherit;display:inherit;height:100%} .cloud-carousel__slide-link:focus,.cloud-carousel__slide-link:hover{text-decoration:none} .cloud-carousel__slide-link:focus{background-color:#f8f9fa} .cloud-carousel__slide-link:visited .cloud-carousel__slide-cta{color:#7b1fa2} .cloud-carousel__slide--story{max-height:128px} .cloud-carousel__slide--story .cloud-carousel__slide-image{display:none;flex:0 0 100px;margin:0;height:100%;width:100px} @media all and (min-width: 600px){.cloud-carousel__slide--story .cloud-carousel__slide-image{display:block}} .cloud-carousel__slide--story .cloud-carousel__slide-body{display:flex;flex-direction:column;height:100%;margin:0 0 0 28px;padding:4px 0} .cloud-carousel__slide--story .cloud-carousel__slide-image--rounded img{border-radius:8px} #cloud-site .cloud-carousel__slide--story .cloud-carousel__slide-metadata{color:#80868b;font:11px "Roboto",Arial,sans-serif;font-weight:500;letter-spacing:.8px;line-height:16px} #cloud-site .cloud-carousel__slide-metadata:hover {text-decoration: none;color:#1a73e8;cursor: pointer;} #cloud-site .cloud-carousel__slide--story .cloud-carousel__slide-description{color:#202124;display:flex;flex:1;flex-direction:column;font-family:"Google Sans",Arial,sans-serif;font-size:16px;font-weight:500;justify-content:space-between;letter-spacing:.47px;line-height:24px;margin:8px 0 0} #cloud-site .cloud-carousel__slide--story .cloud-carousel__slide-description>span:first-child{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;max-height:75px;overflow:hidden;text-overflow:ellipsis} #cloud-site .cloud-carousel__slide--story .cloud-carousel__slide-cta{display:block;font-size:14px;font-weight:500;line-height:14px;margin-top:8px} #cloud-site .cloud-carousel__slide--story .cloud-carousel__slide-cta--clickable{display:inherit} @media all and (min-width: 600px){.cloud-carousel__slide{flex-direction:row;padding:0 73px}} @media all and (min-width: 1024px){.cloud-carousel__slide{padding:0 6%}}.cloud-carousel__slide-image{flex:0 0 104px;width:104px;margin:0 0 27px} @media all and (min-width: 600px){.cloud-carousel__slide-image{margin:0 16px}} @media all and (max-width: 400px){.cloud-carousel__slide-image{display:none}}.cloud-carousel__slide-image img{width:100%} .cloud-carousel__slide-image--rounded img{border-radius:10px} .cloud-carousel__slide-body{margin:0 9%} @media all and (min-width: 600px){.cloud-carousel__slide-body{margin:0 20px 0 36px}} .cloud-carousel--3up .cloud-carousel__slide{padding:0} @media all and (min-width: 600px){.cloud-carousel--3up .cloud-carousel__slide{align-items:start;display:flex;flex-basis:426px;margin-right:68px}} @media all and (min-width: 600px){.cloud-carousel--3up .cloud-carousel__slide--large{flex-basis:626px}} #cloud-site.cloud-home .cloud-link {font-weight: 500;} .cloud-home .cloud-carousel__slide-cta {color:#202124;} .cloud-home .cloud-carousel__slide-cta:hover {text-decoration: none;color:#1a73e8;} @media (min-width: 1450px) {.cloud-home .cloud-carousel__arrow.right-arrow {margin-right: 10px;}/*.home-story-slides {max-width: 100%;overflow: hidden;}*/} #cloud-carousel__slide-ctb {text-decoration: none;} #cloud-carousel__slide-ctb:hover {text-decoration: none;color:#1a73e8;} /*#cloud-carousel__slide-ctc:hover {transform: translateY(-4px);}*/ .cloud-carousel__card {padding: 0 0 10px 0;width:100%;height:100%;min-height:170px;} .cloud-carousel__card--gcp {background-image: url('../../../image/0614/home-securityx.png');background-repeat: no-repeat;background-position: top left;border-radius: 10px; border: 1px solid #dadce0;} .home-story-slides .cloud-carousel__slide .cloud-carousel__slide-image,.home-translate-y {transition: transform .3s ease-in-out;will-change: transform;} .home-story-slides .cloud-carousel__slide:hover .cloud-carousel__slide-image,.home-translate-y:hover {transform: translateY(-4px);} .home-industry-card {align-items: center;border: 1px solid #dadce0;border-radius: 10px;display: flex;flex-basis: 100%;transition: box-shadow .3s ease-in-out, transform .3s ease-in-out;} .home-industry-card:hover,.home-industry-card:focus {box-shadow: 0 2px 4px 0 rgba(60, 64, 67, .3), 0 6px 11px 5px rgba(60, 64, 67, .15);} .home-translate-y {transition: transform .3s ease-in-out;will-change: transform;} .home-translate-y:hover {transform: translateY(-4px);} .home-industry__icon {margin: 0 24px;text-align: center;width: 33%;} .home-industry__label {color: #202124;cursor: inherit;font-size: 14px;line-height: 24px;} @media (min-width: 600px) {.home-section {padding-bottom: 120px;padding-top: 120px;}.home-story-slides .cloud-carousel__slide {height: 128px;}.home-industries__header {padding-bottom: 80px;}.home-industry__icon {max-width: 92px;margin: 30px 0 0;min-width: 32px;width: 33%;}.home-industry__icon img {width: 100%;}.home-industry-card {flex-basis: calc(33% - 24px);flex-direction: column;justify-content: center;position: relative;}.home-industry__label {top: 15px;left:20px;position: absolute;}} @media (max-width: 480px) {.home-industry__icon {max-width: 85px;min-width: 32px;width: 50%;}.home-industry__icon img {width: 100%;}.home-industry-card {flex-basis: calc(33% - 24px);flex-direction: column;justify-content: center;position: relative;padding: 40px 0px 10px 0px;}.home-industry__label {top: 15px;left:20px;position: absolute;}} a:active { text:expression(target="_blank"); } .haru-cloud-button:hover{ background-color: #0188cc; } /* -------------------------------- haru-typing style -------------------------------- */ #haru-typing-container { font-family: sans-serif; margin: .1em 0; color: #232323; } #haru-typing-text { display: inline-block; } #haru-typing-cursor { position: relative; bottom: .1em; right: .2em; display: inline-block; vertical-align: middle; padding: .7em 0; width: 1px; /* height: 1.3em; */ background-color: #232323; animation: haru-typing-blink 1s step-end infinite; } @keyframes haru-typing-blink { from, to { background-color: transparent; } 50% { background-color: #232323; } } @media only screen and (min-width: 768px) { #haru-typing-container { font-size: 25px; } } @media only screen and (max-width: 767px) { #haru-typing-container { font-size: 20px; font-weight: 500; padding-bottom: 1.4em; } } @media only screen and (min-width: 1170px) { #haru-typing-container { font-size: 45px; } } /* -------------------------------- haru-typing 下面俩框框 style -------------------------------- */ @media only screen and (max-width: 599px) { .cloud-grid.cloud-grid__no-gap.cloud-hero__card-container{ text-align: center; } .cloud-grid__col.is-6.is-5__large .cloud-headline4,.cloud-grid__col.is-6.is-7__large .cloud-headline4{ padding-top:2em; } #haru-edit-free-trial-button{ display: block; padding: .9em; width: 50%; margin: 2em auto; } .cloud-grid__col.is-6.is-5__large .cloud-hero__gsuite-icons{ display:inline-block; } } /* -------------------------------- haru-article-list -------------------------------- */ .haru-article-cat a{ font-size: 20px; line-height: 1.5em; color:#202124; display:block; padding:10px 0; } .haru-article-cat a:hover{ text-decoration:none; color:#202124; } .haru-article-cat:hover + .haru-article-h5-underline{ background-color: rgba(0, 103, 237,.5); } .haru-article-h5-underline{ margin-bottom:20px; background-color: rgba(0, 103, 237,.3); height: 6px; position: relative; bottom: 18px; transition:.2s; } .haru-article-h5-underline.haru-article-underline{ width: 150px; } .haru-article-h5-underline.haru-article-underline-s{ width: 122px; } .av-magazine .av-magazine-no-thumb .av-magazine-content-wrap time{ float: right; } .av-magazine .av-magazine-no-thumb .av-magazine-content-wrap .av-magazine-title:hover{ color:rgb(0, 103, 237); } .av-magazine .av-magazine-no-thumb .av-magazine-content-wrap .av-magazine-title a{ line-height:1.9em; } .av-magazine .av-magazine-no-thumb .av-magazine-content-wrap{ border-bottom:dashed 1px #e1e1e1; } /* -------------------------------- haru-上网行为管理下面的ul模块 -------------------------------- */ @media screen and (min-width: 768px) { .haru-col-1-3 { width: 33.3333%; } .haru-col-2-3 { width: 66.6666%; } .haru-col { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } } .haru-combine-items{ /* height:100%; */ color:#444; } .haru-combine-items a{ color: #4285f4 } .haru-combine-items a:hover { color: #4285f4 } .haru-combine-items ul { list-style: none; margin: 0 auto; padding: 0; } .haru-combine-items li { display: list-item; } .haru-combine-items ul .haru-combine-item:nth-child(1) { border-top: 1px solid #cbd6e2; } .haru-combine-items.haru-combine-items-disable-hover .haru-combine-item { cursor: default; } .haru-combine-items.haru-combine-items-disable-hover .haru-combine-item { cursor: default; } .haru-combine-items ul .haru-combine-item { margin-left:0; padding: 30px 10px; border-bottom: 1px solid #cbd6e2; border-left: none; border-right: none; border-top: none; cursor: pointer; position: relative; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } .haru-combine-item-right{ font-weight:300; color:#444444; font-size:18px; padding-right:1em; } @media (min-width: 1024px) { .haru-pure-g.haru-autopad { margin: -12px; } } .haru-pure-g { /* letter-spacing: -0.31em; *letter-spacing: normal; *word-spacing: -0.43em; */ text-rendering: optimizespeed; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } /* -------------------------------- haru-数据防泄露的tabsection模块 -------------------------------- */ #haru-dlp-tabsection{ background-color: #edf1f5; } #haru-dlp-tabsection span.av-tab-arrow-container{ display: none; } #haru-dlp-tabsection a.av-active-tab-title{ background-color: #fff; box-shadow: -8px 0px 20px -15px rgba(0, 0, 0, 0.2); color: #606a72; border-radius: 15px 15px 0 0; font-weight: 600; padding: 5px 30px; } #haru-dlp-tabsection .av-layout-tab.av-animation-delay-container.av-active-tab-content.__av_init_open.avia-builder-el-6, #haru-dlp-tabsection .av-layout-tab.av-animation-delay-container.avia-builder-el-18.el_after_av_tab_sub_section.avia-builder-el-last.av-active-tab-content{ display:inline-block; } @media only screen and (min-width: 768px) { #haru-dlp-tabsection .av-layout-tab-inner .container{ max-width: 1430px; padding:0px 50px; margin: 0 auto; } #haru-dlp-tabsection .av-layout-tab-inner .container .flex_column_table.av-equal-height-column-flextable { background-color: #fff; box-shadow: -8px 0px 20px -15px rgba(0, 0, 0, 0.2); padding:0px 50px; } } /* -------------------------------- haru-即时通讯监管的结尾卡片组 -------------------------------- */ #haru-im-cardgroup .av_one_third.column-top-margin{ position:relative; } #haru-im-cardgroup .av_one_third.column-top-margin:after ,#haru-im-cardgroup .av_one_third.column-top-margin:before { box-sizing: inherit; } #haru-im-cardgroup .av_one_third.column-top-margin:hover:before { content: ""; position: absolute; bottom: -8px; height: 8px; left: 0; right: 0; } #haru-im-cardgroup .av_one_third.column-top-margin:after { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; z-index: 999; transition: box-shadow .3s ease; box-shadow: 0 4px 32px 0 rgba(10,14,29,.02), 0 8px 64px 0 rgba(10,14,29,.08); border-radius: 3px; } #haru-im-cardgroup .av_one_third.column-top-margin:hover:after { box-shadow: 0 16px 40px 0 rgba(10,14,29,.04), 0 16px 80px 0 rgba(10,14,29,.16); } #haru-im-cardgroup .av-special-heading .av-special-heading-tag, #haru-im-cardgroup .av_textblock_section .avia_textblock{ padding-left: 20px; } #haru-im-cardgroup .av_one_third .hr-custom{ min-height:10px; max-height: 10px; /* opacity:.7; */ background-color:#e4e4e4; transition: 1s ease; } #haru-im-cardgroup .av_one_third:hover .hr-custom{ background-color:#1e38a3; } #haru-im-cardgroup .av_one_third:hover { transform: translate3d(0,-8px,0); transition: transform .3s ease; } /* -------------------------------- haru-电子邮件监管circleborder -------------------------------- */ .haru-circleborder { text-align: center; } .haru-circleborder p{ width: 200px; height: 200px; margin: 0; -moz-border-radius: 200px; -webkit-border-radius: 200px; border-radius: 200px; box-sizing: border-box; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; font-size: 15px; text-align:center; } .haru-circleborder p span { padding: 0 20px; } /* -------------------------------- haru-侧标签栏section -------------------------------- */ #haru-tabsection{ font-size:15px; } @media only screen and (min-width: 768px) { #haru-tabsection .noborder_tabs.sidebar_tab_left .tab{ width: 150px; } #haru-tabsection .tabcontainer{ border:none; } #haru-tabsection .tab_inner_content.invers-color{ display:flex; align-items:center; justify-content:space-around; } #haru-tabsection .tab_inner_content.invers-color p{ display:inline-block; width:45%; line-height: 2em; /* color: #444; */ } } @media only screen and (max-width: 767px) { #haru-tabsection .tabcontainer{ border:none; } } #haru-tabsection .noborder_tabs.sidebar_tab_left .tab{ border:none; border-left: 5px solid #b9bfc4; background-color: #f6f9fb; color: #c7ccd0; margin-bottom: 20px; } #haru-tabsection .noborder_tabs.sidebar_tab_left .tab.active_tab{ background-color: #e3eaf2; border-left-color: #0067e6; color: #606a72; } #haru-tabsection .noborder_tabs.sidebar_tab_left .tab_content, .noborder_tabs.sidebar_tab_right .tab_content{ /* background-color: #e3eaf2; */ padding:30px 40px 40px 30px; margin-bottom:20px; box-shadow: -8px 0px 20px -15px rgba(0, 0, 0, 0.2); } /* .noborder_tabs.sidebar_tab_left .tab_content, .noborder_tabs.sidebar_tab_right .tab_content { border: none; box-shadow: -8px 0px 20px -15px rgba(0, 0, 0, 0.2); */ /* -------------------------------- haru-跨背景图标签section -------------------------------- */ #haru-activemonitor-tebsection-bg1-2{ background-image: url(../../../uploads/2020/10/haru-banner80.jpg) ; /* background-attachment: fixed; */ background-repeat:no-repeat; background-position: top center ; } #haru-activemonitor-tebsection-bg2-2 .av-tab-section-tab-title-container{ font-size:16px; padding: 49px 0; border-top: 1px solid #18395a; border-bottom: 1px solid #18395a; background: transparent; } #haru-activemonitor-tebsection-bg2-2 a.av-section-tab-title { color: #6d829c; font-weight: 600; padding: 0; min-width: 275px; transition: .3s; } #haru-activemonitor-tebsection-bg2-2 a.av-section-tab-title:hover { color: #48648c; } #haru-activemonitor-tebsection-bg2-2 a.av-section-tab-title .av-inner-tab-title{ width: 100%; margin:0; padding: 0; } #haru-activemonitor-tebsection-bg2-2 a.av-section-tab-title.av-active-tab-title .av-outer-tab-title{ color: #fff; } #haru-activemonitor-tebsection-bg2-2 .av-tab-arrow-container { display: none; } #haru-activemonitor-tebsection-bg2-2{ background-image: url(../../../uploads/2020/10/haru-banner80.jpg) ; /* background-attachment: fixed; */ background-repeat:no-repeat; background-position: bottom center ; } #haru-activemonitor-headicon .avia-image-container{ max-width: 72px; height: 72px; text-align:left; margin-left:0; } /**************************** * * * 文章 * * * ***************/ /* .template-blog main article header h1.post-title{ line-height: 1em; } */ .template-blog main article header h1.post-title a { font-size: 24px; } #top #wrap_all .template-blog aside.sidebar .inner_sidebar section h3.widgettitle, .template-blog aside.sidebar .inner_sidebar section ul li.cat-item a { font-size: 14px; } /**************************** * * * haru-style.css 零碎覆盖 * * * ***************/ #haru-activemonitor-headicon .avia-image-container { max-width: 72px; height: auto; text-align: left; margin-left: 0; } div .alternate_color .tabcontainer.noborder_tabs .active_tab_content { color: #444; background-color: #fff; } #haru-tabsection .noborder_tabs.sidebar_tab_left .tab { font-size: 16px; } #haru-tabsection .noborder_tabs.sidebar_tab_left .tab.active_tab { background-color: #e3eaf2; border-left-color: #0067e6; color: #606a72; font-weight: normal; } @media (min-width: 767px) { #haru-tabsection .noborder_tabs.sidebar_tab_left .tab { width: 12em; } } #haru-edit-free-trial-boxes .cloud-headline4 { font-size: 20px; } #gc-wrapper .cloud-grid-col p { font-size: 14px; } .cloud-section-p { padding-top: 60px; padding-left: 60px; } #haru-article-list h3.av-magazine-title a { font-size: 13px; } #haru-dlp-tabsection .av-layout-tab-inner .container .flex_column_table.av-equal-height-column-flextable { background-color: #fff; box-shadow: -8px 0px 20px -15px rgba(0, 0, 0, 0.2); padding: 0px 50px; } #haru-activemonitor-tebsection-bg2-2 a.av-section-tab-title { color: #6d829c; font-weight: 600; padding: 0 10px; max-width: auto; transition: .3s; } #haru-activemonitor-tebsection-bg2-2 .av-tab-section-tab-title-container { max-width: 1430px; margin: 0 auto; clear: both; font-size: 16px; min-height: 100px; max-height: 100px; height: 100px; padding: 2em 0; border-top: 1px solid #18395a; border-bottom: 1px solid #18395a; background: transparent; } /* #haru-activemonitor-tebsection-bg1-2 { background-image: url(../../../uploads/2020/10/haru-banner80.jpg); background-attachment: scroll; background-repeat: no-repeat; background-size: 100% auto; background-position: top center; } */ #haru-activemonitor-tebsection-bg2-2 { background-color: #091f3a; background-image: url(../../../uploads/2020/10/haru-banner80.jpg); background-attachment: scroll; background-repeat: no-repeat; background-size: stretch; background-position: bottom center; } #haru-tabsection .noborder_tabs.sidebar_tab_left .tab_content, .noborder_tabs.sidebar_tab_right .tab_content { padding: 30px 40px 40px 30px; margin-bottom: 20px; box-shadow: -10px -5px 15px -15px rgba(0, 0, 0, .2); } .haru-combine-items ul .haru-combine-item { margin-left: 0; padding: 40px 10px; border-bottom: 1px solid #cbd6e2; border-left: none; border-right: none; border-top: none; cursor: auto; /* cursor: pointer; */ position: relative; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } .haru-combine-items.haru-dark-bg ul .haru-combine-item .haru-col-1-3 { display: flex; align-items: center; } .haru-combine-items.haru-dark-bg ul .haru-combine-item h3 { margin-bottom: 0; } /**************************** * * * 数据防泄漏#haru-dlp-tebsection-bg2-2 * * * ***************/ /* #haru-dlp-tebsection-bg1-2{ background-image: url(../../../uploads/2020/10/haru-banner80.jpg) ; background-repeat:no-repeat; background-position: top center ; } */ /* #haru-dlp-tebsection-bg2-2 .av-tab-section-tab-title-container{ font-size:16px; padding: 49px 0; border-top: 1px solid #18395a; border-bottom: 1px solid #18395a; background: transparent; } */ #haru-dlp-tebsection-bg2-2 a.av-section-tab-title { color: #6d829c; font-weight: 600; padding: 0; min-width: 275px; transition: .3s; } #haru-dlp-tebsection-bg2-2 a.av-section-tab-title:hover { color: #48648c; } #haru-dlp-tebsection-bg2-2 a.av-section-tab-title .av-inner-tab-title { width: 100%; margin: 0; padding: 0; font-size: 16px; } #haru-dlp-tebsection-bg2-2 a.av-section-tab-title.av-active-tab-title .av-outer-tab-title { color: #fff; } #haru-dlp-tebsection-bg2-2 .av-tab-arrow-container { display: none; } #haru-dlp-tebsection-bg2-2 a.av-section-tab-title { color: #6d829c; font-weight: 600; padding: 0 10px; max-width: auto; transition: .3s; } #haru-dlp-tebsection-bg2-2 .av-tab-section-tab-title-container { max-width: 1430px; margin: 0 auto; clear: both; font-size: 16px; padding: 2em 0; border-top: 1px solid #18395a; border-bottom: 1px solid #18395a; background: transparent; } #haru-dlp-tebsection-bg2-2 { background-color: rgb(22, 26, 63); } @media screen and (min-width: 1000px) { #haru-dlp-tebsection-bg2-2 img { max-width: 500px; } } /**************************** 员工活动监控 #haru-activemonitor-tebsection-bg2-2 * ***************/ #haru-activemonitor-tebsection-bg2-2 a.av-section-tab-title .av-inner-tab-title { width: 100%; margin: 0; padding: 0; font-size: 16px; } #haru-activemonitor-tebsection-bg2-2 .av-tab-section-outer-container .av-tab-section-inner-container.avia-section-small { position: relative; z-index: 1; } #haru-activemonitor-tebsection-bg2-2 .avia-section-small .av-layout-tab { padding-top: 0px; padding-bottom: 0px; } /**************************** * * * * 员工活动监控 #haru-active-monitor-floatsection * * * ***************/ #haru-active-monitor-floatsection { background-color: transparent; height: 0; min-height: 0; /* float: left; */ position: relative; top: 100px; } /**************************** * * * 快速上手使用#haru-im-cardgroup * * * ***************/ #haru-im-cardgroup .av-special-heading .av-special-heading-tag, #haru-im-cardgroup .av_textblock_section .avia_textblock { padding-left: 0px; } #haru-im-cardgroup .av_one_fifth:hover { box-shadow: none; cursor: default; transition: none; transform: none; } #haru-im-cardgroup .av_one_fifth img { box-shadow: 0 7px 15px 2px rgba(138, 169, 188, .5); } #haru-im-cardgroup .av_one_fifth img { max-height: 300px; width: auto; } #haru-im-cardgroup .av_one_fifth img:hover { box-shadow: 0 7px 25px 4px rgb(138, 169, 188); cursor: pointer; transition: box-shadow .3s ease; transform: translate3d(0, -8px, 0); transition: transform .3s ease; } /**************************** * * * 相关阅读#haru-relative_reading * * * ***************/ #haru-relative_reading .av-special-heading .av-special-heading-tag, #hharu-relative_reading .av_textblock_section .avia_textblock { padding-left: 0px; } #haru-relative_reading .av_one_fifth:hover { box-shadow: none; cursor: default; transition: none; transform: none; } #haru-relative_reading .av_one_fifth img { box-shadow: 0 7px 15px 2px rgba(138, 169, 188, .5); } #haru-relative_reading .av_one_fifth img { max-height: 300px; width: auto; } #haru-relative_reading .av_one_fifth img:hover { box-shadow: 0 7px 25px 4px rgb(138, 169, 188); cursor: pointer; transition: box-shadow .3s ease; transform: translate3d(0, -8px, 0); transition: transform .3s ease; } /**************************** * * * haru-sectiontitle-w-icon * * * ***************/ .haru-sectiontitle-w-icon { display: flex; align-items: center; justify-content: center; } .haru-sectiontitle-w-icon * { margin: 0 5px; font-size: 38px; font-weight: 300; display: inline-block; } .haru-sectiontitle-w-icon img { height: 1em; } /**************************** * * * haru-shadowbox-sm * * * ***************/ .haru-shadowbox-sm .package-info-card { background: #f3f6f9; -moz-box-shadow: 0 15px 29px rgba(75, 117, 169, 0.5); -webkit-box-shadow: 0 15px 29px rgba(75, 117, 169, 0.5); box-shadow: 0 15px 29px rgba(75, 117, 169, 0.5); } .haru-shadowbox-sm .section, .section-small, .haru-shadowbox-sm .section-large { overflow: hidden; } .haru-shadowbox-sm .pure-g.autopad-60>* { padding: 20px; } .haru-shadowbox-sm .right { display: flex; align-items: center; padding-left: 10px; } .haru-shadowbox-sm .center { text-align: center; } .haru-shadowbox-sm .align-middle { align-self: center; } .haru-shadowbox-sm .pure-g>* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 1024px) { .haru-shadowbox-sm .pure-g.autopad-60 { margin: -30px; } .haru-shadowbox-sm .section { padding-top: 70px; padding-bottom: 70px; } } .haru-shadowbox-sm .pure-g { text-rendering: optimizespeed; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } @media screen and (min-width: 768px) { .haru-shadowbox-sm .pure-u-md-1-6, .pure-u-md-5-6 { display: inline-block; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .haru-shadowbox-sm .pure-u-md-1-6 { width: 16.6667%; } .haru-shadowbox-sm .pure-u-md-5-6 { width: 83.3333%; } } .haru-shadowbox-sm .package-info-card { background: #f3f6f9; -moz-box-shadow: 0 15px 29px rgba(75, 117, 169, 0.5); -webkit-box-shadow: 0 15px 29px rgba(75, 117, 169, 0.5); box-shadow: 0 15px 29px rgba(75, 117, 169, 0.5); font-size: inherit; color: inherit; } .haru-shadowbox-sm h3 { font-size: 38px; /* font-weight: 300; */ } .haru-shadowbox-sm .haru-shadowbox-sm-p { color: #444444; font-size: 15px; margin: 0.85em 0; } /**************************** * * * #haru-autobackup-iconlist * * * ***************/ #haru-autobackup-iconlist ul.avia-icon-list li { padding: 20px 0; } #haru-autobackup-iconlist .iconlist-char { font-size: 1.5em !important; } #haru-autobackup-iconlist .iconlist_icon { padding-right: 2em; } /* #haru-autobackup-iconlist .avia_image{ -moz-box-shadow: 0px 15px 30px rgba(75,117,169,0.5); -webkit-box-shadow: 0px 15px 30px rgba(75,117,169,0.5); box-shadow: 0px 15px 30px rgba(75,117,169,0.5); } */ #haru-autobackup-iconlist .iconlist_content { padding-top: 1em; } /**************************** * * * haru-pagebuttom-buybutton * * * ***************/ .haru-pagebuttom-buybutton { padding-top: 20px; } .haru-pagebuttom-buybutton a { position: relative; display: inline-flex; align-items: center; justify-content: center; transition: border-color .3s, background .3s, color .3s; vertical-align: top; white-space: nowrap; outline: 0; font-weight: normal; line-height: 28px; border: solid 2px; min-width: 200px; max-width: 100%; font-size: 16px; padding: 0 2em; height: 60px; border-radius: 3px; } /* .haru-pagebuttom-buybutton a:hover{ text-decoration: none; background: transparent; outline: 0; } */ .haru-pagebuttom-buybutton a:hover, .haru-pagebuttom-buybutton a:visited, .haru-pagebuttom-buybutton a:active, .haru-pagebuttom-buybutton a:focus { text-decoration: none; } .haru-pagebuttom-buybutton .haru-btn-text { z-index: 10; position: relative; pointer-events: none; } .haru-pagebuttom-buybutton a.haru-white-btn { color: #fff; border-color: #fff; } .haru-pagebuttom-buybutton a.haru-white-btn:hover { border-color: rgba(223, 226, 235, .64); color: rgba(223, 226, 235, .64); } .haru-pagebuttom-buybutton a.haru-black-btn { color: #444; border-color: #444; } .haru-pagebuttom-buybutton a.haru-black-btn:hover { border-color: rgba(68, 68, 68, .5); color: rgba(68, 68, 68, .5); } /**************************** * * * haru-autoback-halfbg * * * ***************/ /* #haru-halfbg-section{ position:relative; } .haru-autoback-halfbg{ position:absolute; bottom:0; left:0; } */ /**************************** * * * haru-autobackup-easyslider * * * ***************/ #haru-autobackup-easyslider .avia-slideshow-arrows.avia-slideshow-controls { display: none; } #haru-autobackup-easyslider .av-control-minimal .avia-slideshow-dots a.goto-slide { border: none; background-color: #b3b3b3; opacity: 1; padding: 0px; width: 8px; height: 8px; margin: 0 5px; } #haru-autobackup-easyslider .av-control-minimal .avia-slideshow-dots a.goto-slide:hover { /* background: #0067e6; */ background: rgba(0, 103, 230, 0.5); ; } #haru-autobackup-easyslider .av-control-minimal .avia-slideshow-dots a.goto-slide.active { /* background: #0067e6; */ background: #fff; } /**************************** * * * 数据防泄漏 haru-dlp-slidersection * * * ***************/ #haru-dlp-slidersection { background-color: rgb(237, 241, 245); } #haru-dlp-slidersection .av-tab-section-tab-title-container { max-width: 1430px; margin: 0 auto; /* padding: 0px 50px; */ clear: both; border-top: 1px solid #cbd6e2; border-bottom: 1px solid #cbd6e2; padding: 1em 0; } #haru-dlp-slidersection a.av-section-tab-title .av-inner-tab-title { font-weight: 600; } #haru-dlp-slidersection .av-tab-arrow-container { display: none; } /**************************** * * * 工作效率评估 haru-productivity-cardgroupsection * * * ***************/ #haru-productivity-cardgroupsection .av-flex-placeholder { /* width: 2%; */ } #haru-productivity-cardgroupsection .av_one_fifth .av-special-heading-tag { font-weight: 400; line-height: 1.5em; } #haru-productivity-cardgroupsection .av_one_fifth { width: 240px; max-height: 250px; } #haru-productivity-cardgroupsection .av_one_fifth:hover { box-shadow: 0 7px 25px 4px #d1ddeb; cursor: pointer; transition: box-shadow .3s ease; } #haru-productivity-cardgroupsection .flex_column { /* margin: 0; */ /* margin-bottom: 20px; */ width: 100%; } /**************************** * * * 工作效率评估 #haru-contentslider-section-productivity * * * ***************/ #haru-contentslider-section-productivity .avia-slideshow-dots.avia-slideshow-controls { display: none; } #haru-contentslider-section-productivity .av-subheading{ color: #5f6368; font-family: Arial,sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 1px; line-height: 1; margin: 0; overflow: visible; } /**************************** * * *软硬件资产统计 .haru-assetstatistics-moreinfolink * * * ***************/ a.haru-assetstatistics-moreinfolink { -moz-transition: all .33s ease; -o-transition: all .33s ease; -webkit-transition: all .33s ease; transition: all .33s ease; } /**************************** * * * *软硬件资产统计 #haru-assetstatistics-cardgroupsection * * * ***************/ #haru-assetstatistics-cardgroupsection .av-special-heading { margin-top: 0; } #haru-assetstatistics-cardgroupsection .av_one_fourth h3.av-special-heading-tag { margin-top: 30px !important; font-weight: 500 !important; } #haru-assetstatistics-cardgroupsection .av_one_fourth .av-special-heading-h2 { margin-top: 1.5em; } #haru-assetstatistics-cardgroupsection .av_one_fourth .av-special-heading-h2>* { font-weight: 400; line-height: 1.5em; } #haru-assetstatistics-cardgroupsection .av_one_fourth { width: 240px; max-height: 250px; cursor: default !important; } #haru-assetstatistics-cardgroupsection .av_one_fourth a { cursor: pointer !important; } #haru-assetstatistics-cardgroupsection .av_one_fourth img { width: auto; height: 61px; } #haru-assetstatistics-cardgroupsection .av_one_fourth:hover { box-shadow: 0 7px 25px 4px #d1ddeb; cursor: pointer; transition: box-shadow .3s ease; } /**************************** * * * *软硬件资产统计 #haru-assetstatistics-cardgroupsection2 * * * ***************/ #haru-assetstatistics-cardgroupsection2 .av_one_third { border: 1px solid #dce4ec; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-transition: background .33s ease; -o-transition: background .33s ease; -webkit-transition: background .33s ease; transition: background .33s ease; height: auto; /* padding-bottom: 0; */ } #haru-assetstatistics-cardgroupsection2 .av_one_third:hover { background-color: #f2f5f8; } #haru-assetstatistics-cardgroupsection2 .av_one_third .av-special-heading-h2 { margin-top: 0em; } #haru-assetstatistics-cardgroupsection2 .av_one_third .av-special-heading-h2>* { font-weight: 400; line-height: 1.5em; } #haru-assetstatistics-cardgroupsection2 a.haru-assetstatistics-moreinfolink { display: inline-block; padding: 1em 0; } #haru-assetstatistics-cardgroupsection2 a.haru-assetstatistics-moreinfolink:hover { text-decoration: underline !important; } /**************************** * * * *软硬件资产统计 #haru-assetstatistics-opacitybgsection * * * ***************/ #haru-assetstatistics-opacitybgsection>.container { max-width: 100%; padding: 0; } #haru-assetstatistics-opacitybgsection .av_one_third.el_after_av_one_third.el_before_av_one_third:before { background-image: url("../../../uploads/2020/10/haru-slide_banner_2.jpg"); } #haru-assetstatistics-opacitybgsection .av_one_third.first:before { background-image: url("../../../uploads/2020/10/haru-slide_banner_1.jpg"); } #haru-assetstatistics-opacitybgsection .av_one_third.el_after_av_one_third:before { background-image: url("../../../uploads/2020/10/haru-slide_banner_3.jpg"); } #haru-assetstatistics-opacitybgsection .av_one_third:before { z-index: 0; visibility: visible; -moz-transition: all .33s ease; -o-transition: all .33s ease; -webkit-transition: all .33s ease; transition: all .33s ease; position: absolute; background-repeat: no-repeat; content: ' '; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.2; background-size: cover; background-position: center center; } #haru-assetstatistics-opacitybgsection .av_one_third:hover:before { opacity: 0.5; } #haru-assetstatistics-opacitybgsection .av_one_third .av_textblock_section, #haru-assetstatistics-opacitybgsection .avia_codeblock_section { position: relative; z-index: 1; } #haru-assetstatistics-opacitybgsection .haru-white-button a { margin: 0 auto; } /**************************** * * * *软硬件资产统计 .haru-white-button * * * ***************/ .haru-white-button { padding-top: 20px; } .haru-white-button a { display: block; color: #fff; background-color: transparent; border: 2px solid #fff; font-size: 15px; border-radius: 35px; box-sizing: border-box; max-width: 9em; padding: .5em 1em; /* margin: 0 auto; */ text-align: center; transition: all 0.33s ease; } .haru-white-button a:hover { border-color: #0067e6 !important; background-color: #0067e6; transition: all 0.33s ease; color: #fff !important; text-decoration: none; /* background: transparent; border-color: rgba(223,226,235,.64); cursor: pointer; outline: 0; */ } .haru-white-button .haru-btn-text { z-index: 10; position: relative; pointer-events: none; } /**************************** * * * *软件统一分发、部署 #haru-software_management-tabsection * * * ***************/ #haru-software_management-tabsection img, #haru-software_management-tabsection2 img { display: block; } #haru-software_management-tabsection .flex_column.av_one_full, #haru-software_management-tabsection2 .flex_column.av_one_full { margin: 0; } #haru-software_management-tabsection .tabcontainer { display: flex; align-items: center; } /* #haru-software_management-tabsection .haru-autopad h3.haru-combine-item-right{ margin-bottom: 0; } */ #haru-software_management-tabsection .tab.fullsize-tab { display: none; } #haru-software_management-tabsection .tab { margin: 12px; color: #2e3742; width: 40%; padding: 2px 5px; border: 2px solid #2e3742; font-size: 18px; display: block; text-align: center; white-space: normal; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; } #haru-software_management-tabsection .tab.active_tab { border-color: #2e3742; background-color: #2e3742; color: #fff !important; font-weight: normal; } #haru-software_management-tabsection .sidebar_tab .tab_titles { width: 50%; min-width: 170px; max-width: none; float: left; display: inline-block; } #haru-software_management-tabsection .tab_content, #haru-software_management-tabsection2 .tab_content { background-color: transparent; box-shadow: none; } @media (max-width: 767px) { #haru-software_management-tabsection .tab_content.active_tab_content, #haru-software_management-tabsection2 .tab_content.active_tab_content { background-color: transparent !important; } #haru-software_management-tabsection .tabcontainer { border: none; } #haru-software_management-tabsection .tab { margin: 12px; color: #2e3742; width: 100%; } #haru-software_management-tabsection .tabcontainer { display: block; } #haru-software_management-tabsection .sidebar_tab .tab_titles { width: 100%; } #haru-software_management-tabsection .tab { margin: 12px 0; } #haru-software_management-tabsection .tabcontainer .active_tab { background-color: #2e3742 !important; } } /**************************** * * * *软件统一分发、部署 #haru-software_management-tabsection2 * * * ***************/ #haru-software_management-tabsection2 .tabcontainer .tab_titles .tab.fullsize-tab { display: block; } #haru-software_management-tabsection2 .tab_titles .haru-autopad { display: flex; align-items: center; } #haru-software_management-tabsection2 .tab { border-top: 1px solid #cbd6e2; border-bottom: 1px solid #cbd6e2; border-right: none; transition: all .2s ease-in-out; } #haru-software_management-tabsection2 .tab:hover { background-color: rgba(243, 246, 249, 0.5); } #haru-software_management-tabsection2 .active_tab::before { background-color: #0067e6; content: ' '; width: 15px; height: 2px; position: absolute; top: 0; left: 0; } #haru-software_management-tabsection2 .haru-combine-items ul .haru-combine-item:nth-child(1) { border-top: none; border-bottom: none; } #haru-software_management-tabsection2 .sidebar_tab .tab_titles { max-width: 50%; } #haru-software_management-tabsection2 .sidebar_tab .tab_titles { cursor: pointer; width: 50%; } #haru-software_management-tabsection2 .haru-combine-item { cursor: pointer; } /* @media (min-width: 768px){ #haru-software_management-tabsection2 section .active_tab_content{ width: 100%; } } */ #haru-software_management-tabsection2 .sidebar_tab .tab_titles .haru-autopad .haru-col-2-3 { font-size: 15px; font-weight: normal; } #haru-software_management-tabsection2 .tab { background-color: transparent; } #haru-software_management-tabsection2 .tabcontainer.sidebar_tab { display: flex; align-items: center; padding: 20px 0; } #haru-software_management-tabsection2 .av_tab_section .fullsize-tab { display: none; } @media (max-width: 767px) { #haru-software_management-tabsection2 .tabcontainer.sidebar_tab { display: block; } #haru-software_management-tabsection2 .sidebar_tab .tab_titles { display: block; max-width: none; width: 100%; } #haru-software_management-tabsection2 .active_tab { background-color: #e8edf3 !important; } #haru-software_management-tabsection2 .tabcontainer { border: none; } } /**************************** * * * *盗版软件检测（软件正版化管理） #haru-sm-logogroupsection * * * ***************/ #haru-sm-logogroupsection .av_one_third .av-special-heading-h3 { margin-top: 1.5em; } #haru-sm-logogroupsection .av_one_third .av-special-heading-h2>* { font-weight: 400; line-height: 1.5em; } #haru-sm-logogroupsection .av_one_third { width: 240px; max-height: 250px; } #haru-sm-logogroupsection .av_one_third img { width: 200px; /* height: 76px; */ } /**************************** * * * *盗版软件检测（软件正版化管理） #haru-sm-cardgroupsection * * * ***************/ #haru-sm-cardgroupsection .av_one_third .av-special-heading-h3 { margin-top: 1.5em; } #haru-sm-cardgroupsection .av_one_third .av-special-heading-h2>* { font-weight: 400; line-height: 1.5em; } #haru-sm-cardgroupsection .av_one_third { width: 240px; max-height: 250px; } #haru-sm-cardgroupsection .av_one_third img { width: 76px; height: 76px; } /* #haru-sm-cardgroupsection .av_one_third:hover{ box-shadow: 0 7px 25px 4px #d1ddeb; cursor: pointer; transition: box-shadow .3s ease; } */ /**************************** * * * * 盗版软件检测（软件正版化管理） #haru-sm-contentslider * * * ***************/ @media (min-width: 768px) { #haru-sm-contentslider { position: relative; } #haru-sm-contentslider .slide-entry-excerpt.entry-content>div { padding-right: 0 !important; } #haru-sm-contentslider:after { display: block; position: absolute; right: 0; top: 0; content: ''; /* float:right; */ height: 100%; background-color: #fff; width: 50%; } } #haru-sm-contentslider .avia-smallarrow-slider-heading { position: absolute; bottom: 0; } #haru-sm-contentslider .avia-smallarrow-slider-heading .avia-slideshow-dots { text-align: center; } #haru-sm-contentslider .avia-smallarrow-slider-heading a.goto-slide { border-radius: 25px; /* display: block; */ background-color: #b3b3b3; width: 8px; height: 8px; /* margin: 0 auto; */ /* font-size: 0; */ /* background-clip: content-box; */ border: 10px solid #fff; } #haru-sm-contentslider .avia-smallarrow-slider-heading a.goto-slide.active { background-color: #0067e6; } @media (max-width: 767px) { #haru-sm-contentslider .avia-smallarrow-slider-heading .avia-slideshow-controls a { display: inline-block; } } /**************************** * * * * 盗版软件检测（软件正版化管理） .haru-grey-button * * * ***************/ .haru-grey-button { padding-top: 20px; } .haru-grey-button a { display: block; color: #606a72; background-color: transparent; border: 2px solid #606a72; font-size: 15px; border-radius: 35px; box-sizing: border-box; max-width: 8em; padding: .5em 1em; /* margin: 0 auto; */ text-align: center; transition: all 0.33s ease; } .haru-grey-button a:hover { border-color: #606a72; transition: all 0.33s ease; text-decoration: none; background-color: #606a72; color: #fff; } .haru-grey-button .haru-btn-text { z-index: 10; position: relative; pointer-events: none; } /**************************** * * * *屏幕水印、防截屏 #haru-iconlist-section * * * ***************/ #haru-iconlist-section .haru-pure-u-auto { display: inline-block; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } #haru-iconlist-section .haru-so-pure-g { display: flex; } /**************************** * * * *屏幕水印、防截屏 #haru-faq-accordion-section * * * ***************/ /* #haru-faq-accordion-section *{ transition: all .33s ease; } */ #haru-faq-accordion-section p.toggler { font-size: 18px; border: none; padding-top: 25px; padding-bottom: 25px; } #haru-faq-accordion-section p.toggler.activeTitle { border-bottom: none; } #haru-faq-accordion-section .single_toggle { margin: 1px 0; border-bottom: solid 1px #ccd6e2; } #haru-faq-accordion-section .toggle_content { border: none; padding-top: 0; font-size: 15px; } #haru-faq-accordion-section .toggle_icon { opacity: .5; /* transition: all .33s ; */ } #haru-faq-accordion-section .toggle_icon .vert_icon { /* transition: all .33s ; */ text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /**************************** * * * *屏幕水印、防截屏 #haru-so-easyslider * * * ***************/ #haru-so-easyslider .aviaccordion-inner, #haru-so-easyslider .aviaccordion-slide, #haru-so-easyslider .aviaccordion-slide-link { height: 99%; } /**************************** * * * 屏幕水印、防截屏 #haru-so-sm-img *电子邮件监管 #haru-email-sm-img 软件统一分发、部署#haru-sd-sm-img1, #haru-sd-sm-img2 * dlp和im 3#haru-banner-ctr-icon * * * ***************/ #haru-banner-ctr-icon .avia-image-container img { width: 144px; } #haru-so-sm-img .avia-image-overlay-wrap, #haru-email-sm-img .avia-image-overlay-wrap, #haru-sd-sm-img1 .avia-image-overlay-wrap, #haru-sd-sm-img2 .avia-image-overlay-wrap { width: 72px; margin-top: 25px; } #haru-so-sm-img .av-special-heading, #haru-email-sm-img .av-special-heading, #haru-sd-sm-img1 .av-special-heading, #haru-sd-sm-img2 .av-special-heading { margin-top: 25px; } #haru-email-sm-img .avia-image-container.avia-align-left { float: none; } /**************************** * * * *电子邮件监管 #haru-quick-setting * * * ***************/ #haru-quick-setting { /* background-color: #010745; background-image: url("http://www.nsecsoft.com/wp-content/uploads/2020/07/Quick_bg.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; */ width: 100%; text-align: center; } #haru-quick-setting .haru-qs-Circle { border-radius: 50%; width: 190px; height: 190px; font-size: 18px; border: 3px solid #fff; display: inline-block; vertical-align: middle; } #haru-quick-setting .haru-qs-Circle span { text-align: center; display: block; position: relative; top: 50%; transform: translateY(-50%); color: #fff; } #haru-quick-setting .haru-qs-line { border: 1px solid #fff; width: 22px; display: inline-block; margin-right: -5px; margin-left: -5px; } #haru-quick-setting .haru-qs-line.x2 { width: 44px; } @media (min-width: 1280px) { .haru-qs-Circle { background-position: center center; background-size: contain } .haru-qs-Circle.haru-qs-a { background-image: url("../../../uploads/2020/07/Quick_circle_01.png") } .haru-qs-Circle.haru-qs-b { background-image: url("../../../uploads/2020/07/Quick_circle_02.png") } .haru-qs-Circle.haru-qs-c { background-image: url("../../../uploads/2020/07/Quick_circle_03.png") } #manage .fleximg { left: 10px; top: 46px; width: 614px } /* #haru-quick-setting { min-height: 320px } */ #haru-quick-setting .haru-Circle_section { /* margin-top: 55px */ } } @media (max-width: 1250px) { #haru-quick-setting .haru-qs-line { display: none } } @media (max-width: 1279px) { .section#haru-quick-setting { padding-bottom: 40px } .haru-qs-Circle.haru-qs-a { background-image: url("http://www.nsecsoft.com/wp-content/uploads/2020/07/Quick_circle_01_mobile.png") } .haru-qs-Circle.haru-qs-b { background-image: url("http://www.nsecsoft.com/wp-content/uploads/2020/07/Quick_circle_02_mobile.png") } .haru-qs-Circle.haru-qs-c { background-image: url("http://www.nsecsoft.com/wp-content/uploads/2020/07/Quick_circle_03_mobile.png") } #haru-quick-setting .haru-qs-Circle { width: 150px; height: 150px; font-size: 15px } #haru-quick-setting .haru-Circle_section { margin-top: 30px } } @media (max-width: 1023px) { #manage .tab_control2>ul>li>a { padding: 10px } } @media (max-width: 767px) { #manage .tab_control2 { margin: 20px 0 } #manage .tab_control2>ul>li .p { font-size: 15px; padding: 0 } } @media (max-width: 567px) { #haru-quick-setting .haru-Circle_section { margin-top: 0 } #haru-quick-setting .haru-qs-Circle { border-radius: 0; border: 1px solid #fff; width: 200px; height: 50px; font-size: 15px; margin-bottom: 10px; } #haru-quick-setting .haru-qs-Circle.haru-qs-a { background-image: url("../../../uploads/2020/07/Quick_circle_01_mobile_xs.png") } #haru-quick-setting .haru-qs-Circle.haru-qs-b { background-image: url("../../../uploads/2020/07/Quick_circle_02_mobile_xs.png") } #haru-quick-setting .haru-qs-Circle.haru-qs-c { background-image: url("../../../uploads/2020/07/Quick_circle_03_mobile_xs.png") } } /**************************** * * * *移动存储管理 #haru-colseparated-section * * * ***************/ #haru-colseparated-section .av_one_fourth { border-width: 1px; border-color: #0067e6; border-style: solid; border-bottom: none; border-top: none; } @media (min-width: 768px) { #haru-colseparated-section .av_one_fourth.first { border-left: none; } #haru-colseparated-section .av_one_fourth.el_before_av_hr { border-right: none; } } /**************************** * * * *为什么选择 Ping32 #haru-why-banner * * * ***************/ #haru-why-banner h1 { font-weight: 400; line-height: 1.2em; } /**************************** * * * *上网行为管理 #haru-section-iconlistdisplay * * * ***************/ #haru-section-iconlistdisplay .avia-image-container img { width: 144px; } #haru-section-iconlistdisplay .avia-image-overlay-wrap { width: 72px; margin-top: 25px; } #haru-section-iconlistdisplay .avia-image-container.avia-align-left { float: none; } /**************************** * * * * 屏幕安全 #haru-screen-realtime * * * ***************/ #haru-screen-realtime img { max-height: 50px; width: auto; } #haru-routemap { color: #2e3742; font-size: 16px; line-height: 24px; /* font-family: "Open Sans", Arial, Helvetica, "微软雅黑", "Microsoft YaHei", Verdana, sans-serif; */ } #haru-routemap .h4 { font-weight: normal; } #haru-routemap h4, #haru-routemap h3 { font-size: 18px; line-height: 24px; margin-bottom: 10px; font-weight: 600; } #haru-routemap h1, #haru-routemap .h1, #haru-routemap h2, #haru-routemap .h2, #haru-routemap h3, #haru-routemap .h3, #haru-routemap h4, #haru-routemap .h4, #haru-routemap h5, #haru-routemap h6 { margin-top: 0px; font-weight: normal; } #haru-routemap mg { border: 0; } #haru-routemap img { max-width: 100%; vertical-align: top; } #haru-routemap .center { text-align: center; } .haru-rm-section, .haru-rm-section-small, .haru-rm-section-large { /* 为啥 */ overflow: visible; /* overflow: hidden; */ } .haru-rm-section { padding-top: 70px; padding-bottom: 70px; } /* .haru-rm-container { padding: 0 40px; max-width: 1440px; } */ .haru-pure-u-1-3 { width: 33.3333%; /* width: 33.3333%; */ } .haru-pure-u-1, .haru-pure-u-1-1 { width: 100%; } .haru-pure-u-1-4 { width: 25%; } .haru-pure-u-1, .haru-pure-u-1-1, .haru-pure-u-1-3, .haru-pure-u-1-4 { display: inline-block; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .haru-rm-pure-g { letter-spacing: -0.31em; text-rendering: optimizespeed; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } /* .haru-rm-pure-g.haru-rm-autopad-60-h { margin-left: -30px; margin-right: -30px; } .haru-rm-pure-g.haru-rm-autopad { margin: -12px; margin-right: -12px; margin-left: -12px; } */ .haru-rm-pure-g.haru-rm-autopad-60-h>* { padding-left: 30px; padding-right: 30px; } .haru-rm-pure-g.haru-rm-autopad>* { padding: 12px; padding-right: 12px; padding-left: 12px; } /* .haru-rm-container-1080 { padding: 0 40px; } */ /* .haru-rm-container-1080 { padding: 0 30px; } */ .haru-rm-container-1080 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; margin: 0 auto; max-width: 1080px; } .haru-rm-pure-g.haru-rm-autopad>* { padding: 12px; } .haru-rm-pure-g>* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .center { text-align: center; } .haru-rm-pure-g.haru-rm-autopad { margin: -12px; } .haru-rm-pure-g.haru-rm-autopad>* { padding: 12px; padding-top: 12px; } #haru-routemap .haru-rm-container { float: left; width: 100%; } #haru-routemap .haru-rm-container-1080 { padding: 0 } @media (min-width: 1024px) { #haru-routemap .haru-rm-container-1080 { padding: 0 30px } } #haru-routemap .haru-rm-pure-g.haru-rm-autopad>* { padding: 0 } /* @media (min-width: 1280px) { #haru-routemap .haru-rm-pure-g.haru-rm-autopad>* { padding: 12px } } */ #haru-routemap .haru-rm-sectionGroup { margin: 0 auto } #haru-routemap .haru-rm-sectionGroup p { font-size: 12px } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup p { width: 100% } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup p { width: 100% } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup p { width: 100% } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup span { min-height: 37px } } #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { content: ''; position: absolute; display: block; background-image: url("../../../uploads/2020/10/haru-powerful_icon.png"); background-repeat: no-repeat; background-size: 31px 31px; width: 31px; height: 31px; top: -131px; left: 50%; transform: translateX(-49%); z-index: 5 } @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { background-image: url("../../../uploads/2020/10/haru-powerful_icon@2x.png") } } @media (min-width: 567px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -146px } } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -131px } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -125px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -118px } } @media (min-width: 1280px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -128px } } @media (max-width: 567px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -118px } } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -96px } } @media (max-width: 415px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -105px } } @media (max-width: 400px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -99px; background-size: 23px 23px; width: 23px; height: 23px } } @media (max-width: 330px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -100px } } @media (max-width: 567px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop img { width: auto } } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup { margin-bottom: 8px; min-height: 60px } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup { min-height: 60px } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup { min-height: 81px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup { min-height: auto; min-height: initial } } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup { min-height: 92px; margin-bottom: 0 } } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom { margin-top: 65px } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom { margin-top: 87px } } @media (min-width: 1280px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom { margin-top: 65px } } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup { margin-top: 80px; min-height: 61px } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup { min-height: 81px; margin-top: 67px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup { min-height: auto; min-height: initial; margin-top: 75px } } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup { margin-top: 61px; min-height: 51px } } @media (max-width: 767px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup span { display: none } } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-routemapsutitle div { top: -29px } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-routemapsutitle h3 { color: #337dff; background-color: #fff } @media (max-width: 1023px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-routemapsutitle h3 { padding-top: 6px } } #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { position: relative; min-height: 52px } #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom div.haru-rm-wrap { position: relative } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 20px } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 60px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 110px } } @media (min-width: 1280px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 90px } } @media (max-width: 567px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 60px } } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 25px } } @media (max-width: 380px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 20px } } #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom span.none { visibility: hidden } @media (max-width: 1023px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom .haru-rm-desc1 { display: none } } #haru-routemap .haru-rm-dot { position: relative } #haru-routemap .haru-rm-dot.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot.haru-rm-dot_03:before { bottom: -12px /* bottom: -24px */ } @media (min-width: 480px) { #haru-routemap .haru-rm-dot.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot.haru-rm-dot_03:before { bottom: -14px } } @media (min-width: 1280px) { #haru-routemap .haru-rm-dot.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot.haru-rm-dot_03:before { bottom: -12px } } @media (max-width: 420px) { #haru-routemap .haru-rm-dot.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot.haru-rm-dot_03:before { bottom: -8px } } #haru-routemap .haru-rm-dot2 { position: relative } #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before, .th-th #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before { top: -97px } @media (min-width: 480px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { top: -77px } } @media (min-width: 568px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { top: -85px } } @media (min-width: 768px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { top: -86px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { top: -72px } } @media (min-width: 1280px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { top: -84px } } @media (max-width: 420px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { top: -65px } } @media (max-width: 399px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { top: -66px } } @media (max-width: 420px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before { left: calc(50% - 4px) } } .syno-feature-banner { color: #fff; background-image: url("../../img/dsm/drive/banner.jpg"); background-repeat: no-repeat; background-repeat: no-repeat; background-size: cover; background-position: right center } @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) { .syno-feature-banner { background-image: url("../../img/dsm/drive/banner@2x.jpg") } } .syno-feature-banner .haru-rm-cion_drive { background-image: url("../../img/dsm/drive/drive_72.png"); background-repeat: no-repeat } @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) { .syno-feature-banner .haru-rm-cion_drive { background-image: url("../../img/dsm/drive/drive_72@2x.png") } } #haru-routemap p.subtitle_p { margin: 0 auto } @media (min-width: 1440px) { #haru-routemap p.subtitle_p { width: 69% } } #haru-routemap span { display: block; font-size: 12px; color: #606a72 } #haru-routemap .haru-rm-section { padding-bottom: 35px } /* @media (max-width: 1023px) { #haru-routemap .haru-rm-container-1080 { padding: 0 } } */ #haru-routemap .haru-rm-sectionGroup { margin: 0 auto } #haru-routemap .haru-rm-sectionGroup p { margin-top: 10px; margin-bottom: 3px; font-size: 15px; font-weight: 600; margin-left: auto; margin-right: auto; line-height: 18px } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup p { width: 100% } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup p { width: 50% } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup p { width: 100% } } @media (max-width: 767px) { #haru-routemap .haru-rm-sectionGroup p { font-size: 13px } } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup p { font-size: 12px } } #haru-routemap .haru-rm-sectionGroup span { font-size: 12px; line-height: 18px; color: #606a72 } #haru-routemap .haru-rm-sectionGroup span.haru-rm-desc1 { color: #a1a4a6; margin-bottom: 9px } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup span.haru-rm-desc1 { min-height: 36px } } @media (min-width: 1280px) { #haru-routemap .haru-rm-sectionGroup span.haru-rm-desc1 { min-height: auto; white-space: nowrap } } #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion { position: relative } #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { content: ''; position: absolute; display: block; background-image: url("http://www.nsecsoft.com/wp-content/uploads/2020/10/haru-powerful_icon"); background-repeat: no-repeat; background-size: 31px 31px; width: 31px; height: 31px; top: -143px; left: 50%; transform: translateX(-49%); z-index: 5 } @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { background-image: url("../../../uploads/2020/10/haru-powerful_icon@2x.png") } } @media (min-width: 567px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -123px } } @media (min-width: 600px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -121px } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -158px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -10.5em /* top: -116px */ /* top: -153px */ } } @media (min-width: 1280px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { /* top: -114px */ top: -9rem; /* top: -151px */ } } @media (max-width: 567px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -120px } } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -105px /* top: -110px */ } } @media (max-width: 415px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { /* top: -110px */ top: -104px } } @media (max-width: 400px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { /* top: -86px; */ /* top: -100px; */ background-size: 23px 23px; width: 23px; height: 23px } } @media (max-width: 330px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-wrap.haru-rm-cion:before { top: -105px } } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop, #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom { padding: 27px 0px 35px } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop, #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom { padding: 27px 0px 35px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop, #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom { padding: 27px 10px 35px } } @media (min-width: 1440px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop, #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom { padding: 27px 0 35px } } #haru-routemap .haru-rm-sectionGroup .haru-routemapsutitle { position: relative } #haru-routemap .haru-rm-sectionGroup .haru-routemapsutitle div { position: absolute; left: 0; right: 0; z-index: 5 } #haru-routemap .haru-rm-sectionGroup .haru-routemapsutitle h3 { display: inline-block; padding: 3px 13px; font-size: 16px; font-weight: 600 } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-routemapsutitle h3 { font-size: 12px; padding: 3px 10px } } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop { background-color: #f7f9fb; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px } @media (max-width: 567px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop img { width: 50% } } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .bigphoto img { width: auto } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup { margin-bottom: 8px; min-height: 40px } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup { min-height: 40px } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup { min-height: 81px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup { min-height: auto; min-height: initial } } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup { min-height: 60px; margin-bottom: 0 } } @media (max-width: 767px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-textGroup span { display: none } } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-routemapsutitle { margin-bottom: 60px } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-routemapsutitle { margin-bottom: 40px } } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-routemapsutitle div { top: -5px } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-routemapsutitle h3 { color: #191c1e; background-color: #f7f9fb; font-weight: 600 !important; } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom { margin-top: 27px } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup { margin-top: 80px; min-height: 61px } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup { min-height: 81px; margin-top: 82px } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup { min-height: 81px; margin-top: 82px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup { min-height: auto; min-height: initial; margin-top: 90px /* margin-top: 60px */ } } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup { margin-top: 61px; min-height: 51px } } @media (max-width: 767px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-rm-textGroup span { display: none } } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-routemapsutitle div { top: -29px } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-routemapsutitle h3 { color: #337dff; background-color: #fff } @media (max-width: 1023px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionBottom .haru-routemapsutitle h3 { padding-top: 6px } } #haru-routemap .haru-rm-sectionGroup .bigphoto { min-height: 105px } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .bigphoto { min-height: 68px } } #haru-routemap .haru-rm-sectionGroup .bigphoto h3 { font-size: 16px; font-weight: 700; margin-bottom: 30px } #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopTop, #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { position: relative } #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopTop div.haru-rm-wrap, #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom div.haru-rm-wrap { position: absolute; right: 0; bottom: 0; left: 0 } #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopTop div.haru-rm-wrap div:first-child, #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom div.haru-rm-wrap div:first-child { margin-bottom: 10px } #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopTop { min-height: 75px; margin-bottom: 55px } @media (max-width: 567px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopTop { min-height: 63px } } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopTop { min-height: 39px; margin-bottom: 33px } } @media (max-width: 400px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopTop { min-height: 33px } } #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 70px } @media (min-width: 568px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 38px } } @media (min-width: 768px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 78px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 128px } } @media (min-width: 1280px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 108px } } @media (max-width: 567px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 60px } } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 43px } } @media (max-width: 380px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom { min-height: 38px } } #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom span.none { visibility: hidden } @media (max-width: 1023px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-imgGruopBottom .haru-rm-desc1 { display: none } } #haru-routemap .haru-rm-sectionGroup .haru-rm-textGroup p { line-height: 20px } @media (max-width: 420px) { #haru-routemap .haru-rm-sectionGroup .haru-rm-textGroup p { line-height: 16px } } #haru-routemap .haru-rm-dot { position: relative } #haru-routemap .haru-rm-dot.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot.haru-rm-dot_03:before { content: ''; display: block; position: absolute; width: 5px; height: 5px; background: #191c1e; /* bottom: -24px; */ border-radius: 5px } @media (max-width: 420px) { #haru-routemap .haru-rm-dot.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot.haru-rm-dot_03:before { bottom: -6px } } #haru-routemap .haru-rm-dot.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot.haru-rm-dot_03:before { left: calc(50% - 3px) } #haru-routemap .haru-rm-dot.haru-rm-dot_02:before { left: calc(50%) } @media (max-width: 420px) { #haru-routemap .haru-rm-dot.haru-rm-dot_02:before { left: calc(50% - 0px) } } #haru-routemap .haru-rm-dot2 { position: relative } #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { content: ''; display: block; position: absolute; width: 5px; height: 5px; background: #4988fe; top: -77px; left: calc(50% - 3px); border-radius: 5px } @media (min-width: 568px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { top: -100px } } @media (min-width: 768px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { top: -97px } } @media (min-width: 1024px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { /* top: -50px */ top: -5.5rem; /* top: -88px */ } } @media (max-width: 420px) { #haru-routemap .haru-rm-textGroup { font-size: 10px; } #haru-routemap .haru-rm-dot2.haru-rm-dot_01:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_02:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before, #haru-routemap .haru-rm-dot2.haru-rm-dot_04:before { top: -68px } #haru-routemap img { max-width: 60%; } #haru-routemap .haru-rm-sectionGroup .haru-rm-sectionTop .haru-rm-wrap img { max-width: 30%; } } @media (max-width: 420px) { #haru-routemap .haru-rm-dot2.haru-rm-dot_03:before { left: calc(50% - 4px) } } #haru-routemap .haru-rm-line { padding-top: 0; margin-top: 5px; position: relative; font-size: 13px; border-bottom: 1px solid #191c1e } #haru-routemap .haru-rm-line ul { list-style: none; margin: 0; padding: 0; margin-top: 13px } #haru-routemap .haru-rm-line ul li { padding: 5px 0px } #haru-routemap .haru-rm-line a { cursor: pointer; color: #000021; font-weight: 600 } #haru-routemap .haru-rm-line.haru-rm-line_01:before, #haru-routemap .haru-rm-line.haru-rm-line_03:before { content: ''; display: block; position: absolute; width: calc(50% + 3px); height: 1px; background-color: #f7f9fb; bottom: -1px } #haru-routemap .haru-rm-line.haru-rm-line_01:after, #haru-routemap .haru-rm-line.haru-rm-line_03:after { content: ''; display: block; position: absolute; width: 6px; height: 45px; bottom: -1px } @media (max-width: 420px) { #haru-routemap .haru-rm-line.haru-rm-line_01:after, #haru-routemap .haru-rm-line.haru-rm-line_03:after { height: 30px } } #haru-routemap .haru-rm-line.haru-rm-line_02:after { content: ''; display: block; position: absolute; width: 1px; height: 96px; background: #191c1e; bottom: -50px; left: calc(50% - -2px) } @media (max-width: 420px) { #haru-routemap .haru-rm-line.haru-rm-line_02:after { height: 60px; bottom: -31px } } #haru-routemap .haru-rm-line.haru-rm-line_01:before { left: 0 } #haru-routemap .haru-rm-line.haru-rm-line_01:after { left: calc(50% - 1px); border-left: 1px solid #191c1e; border-bottom: 1px solid #191c1e; border-radius: 0 0 0 5px } #haru-routemap .haru-rm-line.haru-rm-line_03:before { right: 0 } #haru-routemap .haru-rm-line.haru-rm-line_03:after { left: calc(50% - 7px); border-right: 1px solid #191c1e; border-bottom: 1px solid #191c1e; border-radius: 0 0 5px 0 } @media (max-width: 1023px) { #haru-routemap .haru-rm-line.haru-rm-line p { margin-top: 12px } } @media (max-width: 480px) { #haru-routemap .haru-rm-line p { min-width: 90% } } #haru-routemap .haru-rm-line2 { padding-top: 0; position: relative; font-size: 13px; border-top: 1px solid #4988fe } #haru-routemap .haru-rm-line2 ul { list-style: none; margin: 0; padding: 0; margin-top: 13px } #haru-routemap .haru-rm-line2 ul li { padding: 5px 0px } #haru-routemap .haru-rm-line2 a { cursor: pointer; color: #000021; font-weight: 600 } #haru-routemap .haru-rm-line2.haru-rm-line_01:before, #haru-routemap .haru-rm-line2.haru-rm-line_04:before { content: ''; display: block; position: absolute; width: calc(50% + 3px); height: 1px; background-color: #fff; top: -1px } #haru-routemap .haru-rm-line2.haru-rm-line_01:after, #haru-routemap .haru-rm-line2.haru-rm-line_04:after { content: ''; display: block; position: absolute; width: 6px; height: 68px; top: -1px } @media (max-width: 420px) { #haru-routemap .haru-rm-line2.haru-rm-line_01:after, #haru-routemap .haru-rm-line2.haru-rm-line_04:after { height: 48px } } #haru-routemap .haru-rm-line2.haru-rm-line_02:before { content: ''; display: block; position: absolute; width: 1px; height: 68px; background: #4988fe; top: -1px; left: calc(50% - 1px) } @media (max-width: 420px) { #haru-routemap .haru-rm-line2.haru-rm-line_02:before { height: 48px } } #haru-routemap .haru-rm-line2.haru-rm-line_02:after { content: ''; display: block; position: absolute; width: 1px; height: 68px; background: #4988fe; top: -1px; left: calc(150% - 1px) } @media (max-width: 420px) { #haru-routemap .haru-rm-line2.haru-rm-line_02:after { height: 48px } } #haru-routemap .haru-rm-line2.haru-rm-line_03:after { content: ''; display: block; position: absolute; width: 6px; height: 81px; top: -81px } @media (max-width: 567px) { #haru-routemap .haru-rm-line2.haru-rm-line_03:after { height: 50px; top: -41px } } #haru-routemap .haru-rm-line2.haru-rm-line_03:after { left: calc(0% - 5px); border-right: 1px solid #4988fe; border-right-style: dashed } #haru-routemap .haru-rm-line2.haru-rm-line_01:before { left: 0 } #haru-routemap .haru-rm-line2.haru-rm-line_01:after { left: calc(50% - 1px); border-left: 1px solid #4988fe; border-top: 1px solid #4988fe; border-radius: 5px 0 0 0 } #haru-routemap .haru-rm-line2.haru-rm-line_04:before { right: 0 } #haru-routemap .haru-rm-line2.haru-rm-line_04:after { left: calc(50% - 7px); border-right: 1px solid #4988fe; border-top: 1px solid #4988fe; border-radius: 0 5px 0 0 } @media (max-width: 1023px) { #haru-routemap .haru-rm-line2.haru-rm-line2 p { margin-top: 12px } } @media (max-width: 480px) { #haru-routemap .haru-rm-line2 p { min-width: 90% } .haru-pagebuttom-buybutton a.haru-white-btn:hover { color: #fff; } .haru-pagebuttom-buybutton a.haru-black-btn:hover { color: #444; } } /************************************* * * 首页文章列表#haru-new-article-list * * **********************************/ #haru-new-article-list h3.av-magazine-title a { font-size: 16px; } /************************************* * * 首页banner背景#haru-homepage-banner * 以及原版悬浮长条 * **********************************/ #haru-homepage-banner .cloud-hero__card { padding: 60px 55px; } #haru-homepage-banner .cloud-grid__col.is-6.is-7__large{ background: linear-gradient(30deg, rgb(0,112,240), rgb(030,57,164)); } #haru-homepage-banner .cloud-hero__card--gcp { background: transparent; background-image: url('../../../image/haru-homepage-banner2.svg'); background-repeat: no-repeat; background-position: center center; background-size: 100%; } @media only screen and (min-width: 600px) { #haru-homepage-banner .cloud-hero::before { background-image: url('../../../uploads/2020/09/haru-hp-bg-right.png'); background-position: right 0; right: -215px; top: 65px; } #haru-homepage-banner .cloud-hero::after { background-image: url('../../../uploads/2020/09/haru-hp-bg-left.png'); background-position: left 0; left: -95px; top: 100px; } #haru-homepage-banner .cloud-hero::before, #haru-homepage-banner .cloud-hero::after { height: 90%; } } @media only screen and (min-width: 1024px) { #haru-homepage-banner .cloud-hero::before, #haru-homepage-banner .cloud-hero::after { height: 490px; } } #haru-homepage-banner .cloud-hero__card--gcp .cloud-headline4, #haru-homepage-banner .cloud-hero__card--gcp .cloud-button.cloud-button--flat{ color: #fff; } #haru-homepage-banner #haru-edit-free-trial-button{ color: #fff; background-color: transparent; border: solid 1px #fff; /* padding-left: 40px; padding-right: 40px; */ border-radius: 0; transition: all 0.33s ease; } #haru-homepage-banner #haru-edit-free-trial-button:hover{ opacity: .5; /* color:rgb(030,57,164) !important; background-color: #fff; */ } #haru-homepage-banner .cloud-hero__card.cloud-hero__card--gsuite { background-color: rgb(244,247,252); background-color: #cfdbe4bd; } /* #haru-homepage-banner .cloud-hero__card.cloud-hero__card--gsuite .cloud-hero__gsuite-icons{ max-width: 160px; } */ #haru-homepage-banner::after { bottom: -73px; left: 25%; } -o-box-sizing: border-box; /************************************* * * 首页banner打字效果#haru-homepage-banner * * **********************************/ @media only screen and (min-width: 768px) { #haru-homepage-banner #haru-typing-container { font-size: 35px; } } @media only screen and (max-width: 767px) { #haru-homepage-banner #haru-typing-container { font-size: 20px; font-weight: normal; padding-bottom: 1.4em; } } @media only screen and (min-width: 1170px) { #haru-homepage-banner #haru-typing-container { font-size: 50px; } } /************************************* * * 首页banner打字效果#haru-homepage-banner * * **********************************/ #haru-sm-contentslider::after { background-color: #e8edf3; } /************************************* * * 首页banner下面的装饰物#haru-after-banner * * **********************************/ /* #haru-after-banner::after { bottom: -73px; left: 25%; } #haru-after-banner::after { -o-box-sizing: border-box; box-sizing: border-box; content: ''; display: block; width: 187px; height: 187px; position: absolute; bottom: 0px; left: 70%; background: url("https://data-shield.co.uk/wp-content/themes/data-shield/images/dot-circle.svg") no-repeat; background-size: auto; background-size: cover; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } */ /************************************* * * 首页探索功能#haru-homepage-old_entrance * * **********************************/ #haru-homepage-old_entrance .cloud-section-p { padding-top: 0px; padding-left: 0px; } #haru-homepage-old_entrance .cloud-section-header { margin-bottom: 0px; } #haru-homepage-old_entrance #cloud-site header.cloud-section-p{ padding: 70px; } #haru-homepage-old_entrance #cloud-site .cloud-button{ background-color:#0067e6; border: 2px solid #0067e6; color:#fff; transition: all 0.33s ease; } #haru-homepage-old_entrance #cloud-site .cloud-button:hover{ background-color:#fff; /* border: 2px solid #0067e6; */ } #haru-homepage-old_entrance #cloud-site .cloud-button:hover{ -webkit-text-fill-color:#0067e6; color:#0067e6; } .haru-homepage-endbutton.haru-pagebuttom-buybutton a.haru-white-btn{ color: #0067e6; background-color: #fff; transition: all 0.33s ease; } .haru-homepage-endbutton.haru-pagebuttom-buybutton a.haru-white-btn:hover{ border-color: #fff; color: #fff; background-color:rgba(255,255,255,0); } #haru-homepage-old_entrance .haru-white-button a.haru-btn-nodec{ color: #fff; background-color: #0067e6; border-color: #0067e6; } #haru-homepage-old_entrance .haru-white-button a.haru-btn-nodec:hover{ border-color: #0067e6; background-color: transparent; color: #0067e6 !important; } #haru-homepage-old_entrance .cloud-card--solution .cloud-card-icon { height: 100px; width: auto; } #haru-homepage-old_entrance .cloud-grid.cloud-grid-no-gap .cloud-grid-col{ border-style: solid; border-color: rgba(255,255,255,1); border-width:2px; } #haru-homepage-old_entrance #cloud-site .cloud-card.cloud-card--solution{ transition: box-shadow .3s ease-out, background-size .3s ease-out, border .3s ease-out; background-color: #f3f6f9; /* border-style: none none solid none; */ border: none; border-bottom: solid #f3f6f9; } #haru-homepage-old_entrance #cloud-site .cloud-card.cloud-card--solution:hover{ cursor: pointer; box-shadow: 0px 8px 25px #9fb7d4; border-bottom: solid #0067e6; /* z-index: 2; */ } /* #haru-homepage-old_entrance #cloud-site .cloud-card.cloud-card--solution .cloud-card-arrow svg{ position: relative; } */ #haru-homepage-old_entrance #cloud-site .cloud-card.cloud-card--solution:hover .cloud-card-arrow svg{ right: -18px; transition: right 3s ease-out; } #haru-email-qscirclesection,#haru-hp-rotation{ background: linear-gradient(30deg, rgb(0,112,240), rgb(030,57,164)); } #haru-hp-rotation{ box-shadow: 0 5px 20px 0 rgba(0,0,0,.1); } @media only screen and (max-width: 770px){ #haru-homepage-old_entrance .cloud-grid, .cloud-grid--alternate { display: block; } } @media only screen and (max-width: 770px){ #haru-homepage-old_entrance .cloud-grid, .cloud-grid--alternate { display: block; } } /************************************* * * 首页功能介绍#haru-homepage-function_info * * **********************************/ /* #haru-homepage-function_info .haru-arrow-button:hover span{ text-decoration: underline; } */ .haru-arrow-button { display: inline-block; vertical-align: top; position: relative; padding: 20px; padding-right: 0; font-weight: 500; font-size: 18px; } .haru-arrow-button:after { display: inline-block; vertical-align: middle; position: relative; right: -8px; /* top: -.5em; */ transition: right 0.3s; width: 20px; height: 20px; background: url('../../../uploads/2020/09/haru-jiantou.png'); background-size: cover; content: ''; } .haru-arrow-button:hover:after { right: -18px; } /************************************* * * 首页重点功能#haru-homepage-icon-list * * **********************************/ #haru-homepage-icon-list img { display: block; height:100px; /* width: 100px; */ } #haru-homepage-icon-list.row { position: relative; clear: both; } #haru-homepage-icon-list .row:before, #haru-homepage-icon-list .row:after { content: ''; display: block; clear: both; } #haru-homepage-icon-list .col { float: left; } #haru-homepage-icon-list .col-8 { width: 33.333333333333333333%; } #haru-homepage-icon-list .col-12 { width: 50%; } #haru-homepage-icon-list .col-16 { width: 66.666666666666666%; } #haru-homepage-icon-list .col-12{ padding: 10px 20px 10px 5px; } #haru-homepage-icon-list .col-8, #haru-homepage-icon-list .col-12, #haru-homepage-icon-list .icon-link-cell{ display: flex; justify-content:center; flex-wrap: wrap; } #haru-homepage-icon-list .icon-link-cell{ width: 100%; margin: 10px 0; } #haru-homepage-icon-list a{ font-size: 18px; line-height: 1.5; color: #444; display: flex; height: 100%; align-items: center; flex-wrap: wrap; } #haru-homepage-icon-list a:hover{ text-decoration: none; } @media only screen and (max-width: 450px){ #haru-homepage-icon-list .col-12 { float: none; width: 100%; } } #haru-homepage-icon-list .col-12{ transition: box-shadow .3s ease-out, background-size .3s ease-out; } #haru-homepage-icon-list .col-12:hover{ background-color: #f3f6f9; box-shadow: 0px 8px 25px #9fb7d4; } #haru-homepage-icon-list .col-12:hover .haru-arrow-button:after { right: -18px; } /************************************* * * 客户列表 #haru-contentslider-section-productivity * * **********************************/ #haru-contentslider-section-productivity .avia-image-container img{ max-height: 520px; width: auto; } #haru-contentslider-section-productivity .av-subheading{ padding-bottom: 1em; } /************************************* * * 首页三个垂直换行的卡片 #haru-hp-smcards * * **********************************/ #haru-hp-smcards .haru-hp-smcards-container { color: #444; display: flex; /* flex-direction: column; */ flex-wrap: wrap; justify-content: space-around; width: 100%; height: 100%; } #haru-hp-smcards .haru-hp-smcards-container a { display: block; text-decoration: none; color: inherit; } #haru-hp-smcards .haru-hp-smcard { width: 40%; min-width: 240px; min-height: 300px; padding: 30px; margin: 20px; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1); background-color: #fff; border-radius: 20px; /* border-radius: 50px; background: #f9f9f9; box-shadow: 20px 20px 60px #d4d4d4, -20px -20px 60px #ffffff; */ } @media screen and (max-width: 767px){ #haru-hp-smcards .haru-hp-smcard { width: 100%; min-height: 200px; } } #haru-hp-smcards .haru-hp-smcard .haru-hp-smcard-icon { max-width: 24px; } #haru-hp-smcards .haru-hp-smcard .haru-hp-smcard-icon img { max-width: 100%; } #haru-hp-smcards .haru-hp-smcard .haru-hp-smcard-title { font-size: 18px; font-weight: 700; padding: 1em 0; } #haru-hp-smcards .haru-hp-smcard .haru-hp-smcard-info { font-size: 16px; } /************************************* * * 首页banner下面的轮播 #haru-hp-rotation * * **********************************/ #haru-hp-rotation{ background: linear-gradient(30deg, rgb(0,112,240), rgb(030,57,164)); } #haru-hp-rotation{ box-shadow: 0 5px 20px 0 rgba(0,0,0,.1); }